Make div container adjust to floating children elements
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:
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:
.fc:after{content:".";clear:both;display:block;visibility:hidden;height:0;}
* html .fc{height:1px;}
Just add the fc css class to the div container element, and the result will be
as such:
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.