28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un problème avec les div et les float/clear, je vous explique:

J'ai un conteneur Gris (#conteneur), qui contient 3 colonnes Rouge (#content_left, #content_center, #content_left). Dans chaque colonne j'ai des petites boites (.box) qui sont affiché une par ligne.

Mon soucis c'est que je n'arrive pas à mettre les 3 colonnes rouges sur la même ligne avec Internet Explorer 6... mais sous Firefox cela marche parfaitement.

Voici mon code:

/*		conteneur		*/

#conteneur {
margin: 0px 50px 0px 50px;
border-left: 1px solid #4D80DF;
border-right: 1px solid #4D80DF;
border-bottom: 1px solid #4D80DF;
padding: 0px;
background-color: #ffffff;
overflow:hidden;
}

/*		 content : left, center, right 		*/

#content_left {
clear:left; /* ou display: inherit */
width: 33.33%;
padding:0px;
margin:0px;
float:left;
}

#content_center { 
width: 33.33%; 
padding:0px;
margin:0px;
overflow: auto;
float:left;
}

#content_right {
width: 33.33%; 
padding:0px;
margin:0px;
overflow: auto;
}

/*###########*/
/* Class des box */
/*###########*/

.box {
padding:0 0 0 11px;
margin:10px;
background:url("../img/tsr-l.gif") top left no-repeat;
}


Sous IE6 j'ai 2 colonne sur la même ligne, et la dernière retourne à la ligne.
Si je rajoute un float:left; à ma div #content_left mes 3 colonnes sortes du conteneur (Mais aucun problème avec FF2) Smiley decu

J'ai parcouru la FAQ mais je n'ai rien trouvé, peut être j'ai zappé l'article ?!

Si vous avez une solution pour régler ce problème... merci d'avance Smiley smile
Bin en fait je ne pense pas que les largeurs soit un problème, elle se redim toute seul. Et comme je l'ai dit, si je rajoute un float:left; avec #content_right sous FF mes 3 colonnes sont sur la même ligne. Mais pas sous IE6.

Merci pour les liens ! Je regarderai ça à tête reposé demain ^^