Self Clearing Floats in CSS

This is a quickie mainly to remind myself. My friend and fellow Fudge developer, Mike “1312” Byrne showed me a CSS trick to have divs clear themselves.

div#container
{
  height: 1%;
}

div#container:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

Brilliant. This works in Safari, Firefox and IE6+ as far as I know.

(Possibly) Related Posts

No related posts

Posted in CSS
Tags: Clear, CSS

You can follow any responses to this entry through the RSS 2.0 feed. Trackback from your own site.

John Nunemaker

Most people don't know that adding overflow:auto on the parent of a floated element will automatically make the parent contain the floated child. Also, you can float the parent (float nearly everything) and that will fix the issue.

Aleksey Gureiev

I would say, just "overflow: hidden" works 99% of the time. :)

For IE6 you may want to specify the width of the container explicitly, but again, only if the overflow rule doesn't work, which is extremely rare.

Oleg

overflow: hidden
_height: 1%

works 99% of the time just as well.

Christian

This is the clear-fix solution. However, for most uses it really is outdated, using overflow: auto; will do the trick most of the time.

Ruby on Rails, Javascript, CSS and Standards

Self Clearing Floats in CSS

(Possibly) Related Posts

Search

Archives

Categories