Div container ne s'étire pas au contenu

**userparis** · 06/02/2013, 22h46

Bonsoir, j'ai un Div container dont je ne définit pas de height qui contient deux div en colonne, un a gauche et un a droite.

Pour voir ce qu'il se passe je met des borders à ces 3 div.

L'alignement des 2 div dans le div container est fait avec float : left, width fixe du div de gauche et margin-left pour le div de droite : width div gauche + 10px, ça marche bien.

Par contre, les deux div contiennent du texte sur plusieurs ligne et je me rends compte que le div container ne s'étire pas en fonction du texte. En gros les bordures des 2 div horizontale dépasse la bordure basse du div container, je m'attendais a ce que le div container s'étire en fonction du contenu.

Je dis ça car a terme ce bloc de trois div va etre mis dans une boucle php pour afficher autant de div container que l'on aura de résultat d'une requete.

Comment faire pour que le div container s'étire en fonction de son contenu ? J'ai essayé height:auto; mais ça marche pas.

Merci

**Muchos** · 07/02/2013, 17h36

Du code aurait été apprécié… Néanmoins, je pense que c'est dû au float.
Et en essayant ça ? (désolé, j'ai pas pu tester)

Code html :

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
22
23
24
25
26
27
28
 
<!doctype html>
<html lang="fr-FR">
<head>
  <meta charset="UTF-8" />
  <title>conteneur adapté à float</title>
  <style>
div {
background: gray;
}
section {
float: left;
width: 33%;
height: 100px;
margin: 1em;
background: white;
}
.clear {clear: both;}
  </style>
</head>
<body>
  <div>
    <section>foo</section>
    <section>bar</section>
    <span class="clear"></span> <!-- pour pousser le conteneur -->
  </div>
</body>
</html>

**NoSmoking** · 07/02/2013, 21h42

Bonsoir,

Envoyé par Muchos

Néanmoins, je pense que c'est dû au float.

effectivement, les éléments en float:left ou autre sont "partiellement" retiré du flux ce qui fait que le contenant n'a pas de consistance, pas de height, à l'écran.

Tu peux palier à cela en décarant ta DIV conteneur en display:table et tes DIVs contenues en display:table-cell, mais pas reconnu par IE7 me semble t-il, mais bon...