Make div container adjust to floating children elements

Aug 6, 2010 css

Today, my collegue Johan showed me a css fix for a problem that happens when a div container has nested, floating divs.

The fix makes the div container not resize itself according to the size of its nested elements, as such:

Default div behavior

As you see, the div doesn’t adjust its size according to the nested elements. It can be fixed, though, by this nice little CSS class:

* html .fc{height:1px;}

Just add the fc css class to the div container element, and the result will be as such:

Default div behavior