Discussion :

[student_php]

bonjour,

Je voudrais régler un détail qui me pose problème, j'ai un corps de page dans lequel j'ai 2 partie, une à gauche et une à droite (deux float), le problème est que ma div corps ne "s'agrandit" pas en fonction de mon float le plus haut (ils ont une hauteur variable selon ce que rentre l'utilisateur).

en fait ma div "corps" fait 0 de hauteur, comment faire en sorte qu'elle soit de la hauteur de la plus grande div qu'elle contient (je pensais que ca se ferrait automatiquement mais apparemment les div ne "détectent" pas les float automatiquement).

Voici les div concernés:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
#corps
{
	width: 86.5%;
	margin-left:12.5%;
   margin-bottom: 20px;
  padding: 5px;
   color: #B3B3B3;
   background-color: black;
   background-repeat: repeat-x;
   border: 1px solid rgb(64,0,0);
}

Dans ce corps il y a:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#corps_left
{
width: 41.2%;
   padding: 5px;
   color: #B3B3B3;
border: 5px inset red;
margin-bottom: 10px;
float: left;
background-color: black;
}
 
#corps_right
{
width: 43%;
   padding: 5px;
   color: #B3B3B3;
border: 5px inset blue;
float: right;
right:15px;
background-color: black;
}

Et le html est

Code :

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

1
2
3
4
5
6
7
 
<div id="corps">
     <div id="corps_left">
     </div>
     <div id="corps_right">
     </div>
</div>

En espérant avoir été explicite ! Merci bien.

[scourjean]

En effet le float empêche au conteneur parent de s'agrandir dynamiquement.

2 solutions :
- javascript : agrandir #corps selon #corps_left et #corps_right
- eviter float et passer par un table avec 2 colonnes (je suppose que c'est ce que tu voulais éviter)

[student_php]

Oui on m'a déconseillé de structurer mes pages avec des tableaux, je vais voir si je trouve comment faire avec Javascript, j'y avais pas pensé.

Merci pour ta réponse !

[Candygirl]

Hello,

Pour que ton conteneur prenne en compte le contenu des flottantsr, la solution actuelle la plus simple est de lui appliquer une propriété établissant un nouveau contexte de formattage.:

Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts.

Dans la plus part de cas, un overlow:hidden ou auto fait très bien l'affaire.
D'autres solutions envisageables dans la faq