Question

I’ve been having trouble creating parent DIVs that encloses the floating child DIVs.

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

…where #parent would expand vertically (with padding if it was styled that way) to accomodate .child3. And If I added a border around #parent it would enclose all three child DIVs.

What’s the best way to style this arrangement to ensure this behavior?

Looking for the best practice.

Answer 1

You can add a “wrapper” div inside the parent, and a “clear: both” element in there as well. Check this 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>

And the css:

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

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

div.clear {
    clear: both;
}