Taille div parente

Version imprimable

14/03/2012, 11h10
trist06

Taille div parente
Bonjour,

Voila j'aurais besoin que l'on m'explique le comportement suivant :

J'ai une div parent et a l'intérieur deux divs enfants qui sont côte à côte avec la caractéristique float.
Code:

1 2 3 4 5 <div id="parent"> <div id="enfant1" style="float:left;height:100px;"></div> <div id="enfant2" style="float:right;height:100px;"></div> </div>
Lorsque j'inspecte la div parent avec firebug, je m'aperçoie quelle fait 0px de hauteur, alors qu'elle contient deux div de 100px.

J'ai donc tenter la solution de mettre sur la div parente un overflow:hidden qui résout le problème, mais je ne comprend pas la logique, quelqu'un pourrais m'expliquer ?

Merci :) ;)

La div parent fait effectivement 0px de hauteur puisqu'elle n'a pas de hauteur fixée (d'autant plus que les div enfants sont en float). Je propose deux solutions (j'ai mis un border et des couleurs pour mieux visualiser le rendu) :

1. Fixer une height sur la div parent.
Code:

1 2 3 4 5 6 <div id="parent" style="border: medium solid black; height: 100px; width: 100%;"> <div id="enfant1" style="float: left; width: 50%; height: 100px; background-color: blue;"></div> <div id="enfant2" style="float: right; width: 50%; height: 100px; background-color: red;"></div> </div> </body>
2. Utiliser des table css (j'adore cette méthode).
Code:

1 2 3 4 5 <div id="parent" style="display: table; border: medium solid black; width: 100%;"> <div id="enfant1" style="display: table-cell; width: 50%; height: 100px; background-color: blue;"></div> <div id="enfant2" style="display: table-cell; width: 50%; height: 100px; background-color: red;"></div> </div>

Citation:

1. Fixer une height sur la div parent.

Au lieu de faire ça, il faut réellement comprendre pourquoi tu as une hauteur de 0px.

Tu te retrouves avec ce comportement car en réalité, tu as sortis tes éléments du flux normal de la page. Je m'explique, en mettant enfant1 et enfant2 en flottant, tu les sorts du flux (ils deviennent flottant comme l'indique la propriété)

Ainsi, si on met des bordures à tes conteneurs et des largeurs aux enfant on à ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr"> <head> <title>test</title> </head> <body> <div id="parent" style="border:1px solid blue;"> <div id="enfant1" style="float:left;height:100px;width:100px;border:1px solid red;"></div> <div id="enfant2" style="float:right;height:100px;width:100px;border:1px solid red;"></div> </div> </body> </html>
Conteneur bleu (parent) sans hauteur
Conteneurs rouges (enfants) avec la hauteur et largeur qu'on leur a assigné

Pour les remettre dans le flux, il faut utiliser la propriété "overflow" sur ton conteneur. On se retrouve avec :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr"> <head> <title>test</title> </head> <body> <div id="parent" style="border:1px solid blue;overflow:auto;"> <div id="enfant1" style="float:left;height:100px;width:100px;border:1px solid red;"></div> <div id="enfant2" style="float:right;height:100px;width:100px;border:1px solid red;"></div> </div> </body> </html>
ton conteneur bleu "voit" bien le flux de tes éléments qui sont dedans.

Citation:
Envoyé par pop_up
Au lieu de faire ça, il faut réellement comprendre pourquoi tu as une hauteur de 0px.

Tu te retrouves avec ce comportement car en réalité, tu as sortis tes éléments du flux normal de la page. Je m'explique, en mettant enfant1 et enfant2 en flottant, tu les sorts du flux (ils deviennent flottant comme l'indique la propriété)

Ainsi, si on met des bordures à tes conteneurs et des largeurs aux enfant on à ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr"> <head> <title>test</title> </head> <body> <div id="parent" style="border:1px solid blue;"> <div id="enfant1" style="float:left;height:100px;width:100px;border:1px solid red;"></div> <div id="enfant2" style="float:right;height:100px;width:100px;border:1px solid red;"></div> </div> </body> </html>
Conteneur bleu (parent) sans hauteur
Conteneurs rouges (enfants) avec la hauteur et largeur qu'on leur a assigné

Pour les remettre dans le flux, il faut utiliser la propriété "overflow" sur ton conteneur. On se retrouve avec :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr"> <head> <title>test</title> </head> <body> <div id="parent" style="border:1px solid blue;overflow:auto;"> <div id="enfant1" style="float:left;height:100px;width:100px;border:1px solid red;"></div> <div id="enfant2" style="float:right;height:100px;width:100px;border:1px solid red;"></div> </div> </body> </html>
ton conteneur bleu "voit" bien le flux de tes éléments qui sont dedans.
Merci l'explication que je cherché est la ! :ccool: