Taille div parente

**trist06** · 14/03/2012, 11h10

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Muchos** · 14/03/2012, 12h28

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**pop_up** · 15/03/2012, 17h16

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**trist06** · 16/03/2012, 09h23

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

Taille div parente

CSS

Vue hybride

Discussions similaires

Partager

Partager