Faire DIV parent ensacher flottant DIVs chid

Question

J'ai eu des difficultés à créer des DIVs parents qui entourent les DIVs enfants flottants.

<div id="parent"> 
    <div class="child1">content</div>  
    <div class="child2">content</div> 
    <div class="child3">taller content</div> 
</div> 

... où #parent élargirait verticalement (avec un rembourrage si elle était de style de cette façon) pour accueillir .child3. Si j'ajouté une bordure autour #parent il engloberait les trois DIVs enfants.

Quelle est la meilleure façon de styliser cet arrangement pour assurer ce comportement?

Vous cherchez la meilleure pratique.

Answer 1

Vous pouvez ajouter un div "wrapper" dans le parent, et un élément "clear: both" dans le parent. Cochez cette jsFiddle http://jsfiddle.net/yvVP8/

<div id="parent"> 
    <div id="wrapper"> 
     <div class="child1">content</div> 
     <div class="child2">content</div> 
     <div class="child3">taller content lala lala lalal lala</div> 
    </div> 
    <div class="clear"></div> 
</div> 

Et le css:

#parent { 
    border: 1px solid #000; 
    width: 300px; 
} 

#wrapper .child1, #wrapper .child2, #wrapper .child3 { 
    float: left; 
    padding: 5px; 
    width: 90px; 
} 

div.clear { 
    clear: both; 
} 

Answer 2

Un simple

#parent { 
    overflow:hidden; 
} 

fera le travail:

http://jsfiddle.net/XAbhY/

Answer 3

Vous pouvez simplement ajouter float:left; à la div parente.

Il devrait forcer la taille/bordure du parent à envelopper tous les frères et sœurs. Je ne sais pas si c'est valide, mais ça marche pour moi.