28172 sujets

CSS et mise en forme, CSS3

Design Fluide

Salut à tous!
Premièrement un grand bravo à tous les membres d'AlsaCreations. C'est devenu ma réference! (la preuve par Google, dès que je cherche un sujet, les premières réponses vont pointer sur AlsaCreations, et géneralement me donne la solution)

Ici j'ai un petit probleme de design fluide.
Je voudrait faire quelque chose du genre: 1 colonne fixe a gauche (qui serait un menu), ou se colle un container qui prend tout l'espace restant. Ce container se divise en 2 section de largeur égale (50% chacune).
tout s'affiche bien au premier abord, mais lorsque je resize la fenetre de mon navigateur, la partie a 50% de gauche reste de meme largeur, alors que celle de droite disparait peu a peu sous le redimensionnement.
Autrement dit, je pense que les 50%/50% s'appliquent au fenetrage initiale lorsque la page s'ouvre, mais ils ne suivent pas les redimensionnement ultérieurs... Est ce qu'il y'a un moyen d'arranger ca? Smiley ohwell
Voila mon code
<style type="text/css">
<!--
#box1 {
background-color:#339999;
width:100px;	
height:100px;
float:left;
}

#box2 {
background-color:#CCFF33;
margin-left:100px;
width:100%;	
height:100px;
}

#box2a {
background-color:#CC1133;
width:50%;	
height:100px;
float:left;
}
#box2b {
background-color:#CCFFFF;
width:50%;	
height:100px;

float:left;
}
-->
</style>
</head>

<body>
<div id="box1"></div>
<div id="box2">
	<div id="box2a"></div>
	<div id="box2b"></div>
</div>
</body>
</html>


merci a tous pour votre aide!
bonjour

qu'est-ce que ça donne si tu supprimes width: 100% sur #box2 ?

évidemment, il y a une limite en deça de laquelle tu ne peux réduire la fenêtre sans faire passer à la ligne #box2b ou alors il faut donner une largeur fixe à #box2... ou à un conteneur qui contient box1 et box2.
Salut,

Une piste pour une des solutions:
*{margin: 0; padding: 0;}

#box1 {
background-color:lime;
width:100px;	
height:100px;
float:left;
}

#box2 {
background-color:red;
position: relative;
margin-left:100px;
height:100px;
}

#box2a {
background-color:green;
width:50%;	
height:100px;
float:left;
}

#box2b {
background-color:blue;
width:49.9%;	
height:100px;
float:right;
}


Pourquoi 49.9% sur box2b? a 50% chez FF (opera?) ça marche mais ie n'a pas le même calcul d'arrondi et de temps en temps chez IE 50%+50%= à plus de 100% ce qui fait passer box2b dessous donc cette petite triche (en mettant le même background à box2b qu'à box2 ça passe en fonction du design)

Sinon restera surement un 3px jog bug à gérer sous ie6 Smiley lol
Sujet clos
Aller à