28172 sujets

CSS et mise en forme, CSS3

Le problème est simple mais je n'arrive pas à le résoudre.
J'ai deux div qui sont alignés horizontalement.
Malheureusement le texte du deuxième se place en bas du div.



<div id="milieu">
<div class="gauche">texte texte texte</div>
<div class="droite">texte texte texte</div>
</div>


#milieu {
margin-top: 10px;
width: 500px;
background-color:#F0EADE;
}
.gauche {
display: block;
float:left;
margin: 5px 5px 5px 5px; 
padding: 5px 5px 5px 5px; 
background-color: #FFFFFF;
width: 160px;
color:#333333;
}
.droite {
display: block;
float: right;
margin-left: 180px;
width: 320px;
}
Salut,

Enlève le margin-left du div .droite.
Et mets un display:inline sur le div .gauche. Ca corrigera un bug d'IE6.
Modifié par Agylus (08 Dec 2009 - 16:42)
Salut,

Ton div conteneur fait 500 de large. Dans cette largeur tu veux faire tenir :
- .gauche qui fait 160 de large + 10 de marges + 10 de padding
- .droite qui fait 320 de large + 180 de marges

Après calcul : y'a pas la place Smiley smile . Ta deuxième div passe donc "à la ligne", c'est ce qui doit te donner l'impression que le texte est en bas.