Aller au contenu

Aligner des DIV horizontalement


raph37

Sujets conseillés

Bonjour a tous ,

J'ai une question posé par beaucoup de personnes , mais dont je n'ai toujours pas compris les solutions ...

j'ai un div global qui contient 3 autres div :


<div id="global">
<div>contenu bloc1</div>
<div>contenu bloc2</div>
<div>contenu bloc3</div>
</div>

j'aimerai donc les aligner horizontalement :


#global
{
width:600px;
}
#global div
{
float:left;
height:120px;
}

le problème se présente ici , comment faire pour que mes 3 div soit aligné et que leur conteneur prenne en compte leur hauteur ?

Merci de votre aide ;)

Lien vers le commentaire
Partager sur d’autres sites

Salut,

Tu peux ajouter après les trois divs un div vide avec pour style clear both :


<div id="global">
<div>contenu bloc1</div>
<div>contenu bloc2</div>
<div>contenu bloc3</div>
<div style="clear: both; float: none; height: 0;"></div>
</div>

"clear: both" signifie que le div ne peut pas se trouver sur une ligne horizontale où se trouverait un élément flottant. Le div sera donc forcément au-dessous des trois autres, ce qui forcera le conteneur global à s'agrandir en hauteur.

Dans le code j'ai mis "float:none;" et "height:0" car la façon dont tu as écrit les styles, ils vont s'appliquer à tous les divs contenus dans global (il vaudrait beaucoup mieux que tu leur appliques une classe spécifique).

Lien vers le commentaire
Partager sur d’autres sites

  • 1 month later...

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...