The CSS fix of the day

Today, my dear collegue Johan Driessen showed me a nice CSS fix.

The fix solves the problem that div elements with nested, floating divs will not resize according to the size of its nested elements, as such:

Default div behavior

Default div behavior: The div does not adjust its size according to nested, floating elements.

Well, thanks to Johan  – although he stresses the fact that he found it on the web and did not write it himself – I have now a nice little CSS class that takes care of this:

   .fc:after{content:".";clear:both;display:block;visibility:hidden;height:0;}
   * html .fc{height:1px;}

Just add this class to the div element that contains floating elements, and the result (sorry for the poooor graphics), will be as such:

CSS fix result

CSS fix: The div adjusts its size according to nested, floating elements.

Hope this helps. If so, thank Johan.

Advertisements