2010-12-08 45 views
0

J'ai regardé toutes les discussions div je pourrais trouver et n'a pas tout à fait voir ma réponse. J'espère que je ne suis pas reposant.Empêcher div divisée de divs liquides qui se chevauchent lorsque l'écran est redimensionné

J'ai une disposition liquide sauf une div sur la gauche que j'ai dans une position fixe. J'ai besoin de rester fixe si je veux que ça reste. Les autres divs sont répartis à côté d'elle. Tout semble parfait jusqu'à ce que l'écran atteigne une certaine largeur (autour de 1700px) et que la div fixe commence à couvrir la div immédiatement à droite. J'ai utilisé le min-width sur le corps pour le réparer, mais la min-width qui fonctionne est trop grande pour garantir un défilement horizontal sur des écrans plus petits ou lorsque quelqu'un redimensionne la fenêtre/le zoom.

Comment puis-je le garder liquide et le rendre toujours beau, quelle que soit la taille de l'écran?

CSS ci-dessous:

body { 
min-width:1000px; /*~1700 to fix problem*/ 
padding-left:5px; 
padding-right:5px; 
padding-top:0; 
padding-bottom:0; 
margin:0; 
} 

.container { 
padding: 0; 
margin-left:auto; 
margin-right:auto; 
height:100%; 
} 

.leftinfo { 
float:left; 
position:fixed; 
left:.5%; 
top:150px; 
background-color:#FFF; 
height:400px; 
width:160px;; 
padding:10px; 
} 

.rightinfo { 
background-color:#33F; 
float:right; 
height:200px; 
border:thin; 
width:15%; 
margin-top: 25px; 
} 

.contentbackground { 
float:left; 
width:74%; 
margin-left:10.5%; 
margin-top: 30px; 
} 

Merci beaucoup pour l'aide!

+0

Utilisez JavaScript. –

+0

Merci d'avoir répondu Matt. Tu veux dire utiliser Javascript pour contrôler la largeur de chaque div? Je ne suis pas fermé à Javascript, mais je voudrais que le site fonctionne sur des ordinateurs qui n'ont pas Javascript en cours d'exécution. – Siriss

Répondre

0

Avez-vous envisagé d'utiliser les valeurs% width au lieu de px? Cela pourrait permettre un redimensionnement relatif sous différentes tailles de fenêtre.

+0

J'ai essayé d'utiliser tous les pourcentages, mais cela crée des problèmes plus graves. Par exemple, lorsque j'utilise min-width pour empêcher mes images de redimensionner, le div fixe sera toujours réduit parce que même si le navigateur a une barre de défilement, les fenêtres continuent de rétrécir. Cela provoque des lacunes étranges pour commencer à apparaître, et le texte dans le div fixe pour déborder. Peut-être que j'utilise le% incorrectement? ou ne devrait pas utiliser min-width? – Siriss

+0

utilisez% pour la largeur uniquement et non la hauteur – Quazi