Make div container adjust to floating children elements

Aug 6, 2010 · Follow on Twitter and Mastodon 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

Discussions & More

Please share any ideas, feedback or comments you may have in the Disqus section below, or by replying on Twitter or Mastodon..

If you found this text interesting, make sure to follow me on Twitter and Mastodon for more content like this, and to be notified when new content is published.

If you like & want to support my work, please consider sponsoring me on GitHub Sponsors.