One of the biggest problems with table-less CSS layouts is the problem with floats and their heights. When you float an inner element, the outer element no longer knows about the height of the inner element. This can wreck havoc when the outer text is shorter than the inner – the elements after the outer div are pulled next to the inner when they should be below both. And this is most problematic when the outer div has a background or border styling that needs to extend to the bottom.

The way to fix this is to “clear” the parent element by posting something invisible after it that clears the float. The easiest code I found for this problem is at PositionIsEverything. They in turn link to an article with a better explanation at SitePoint. The code that I use is below.

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


.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Apparently, as mentioned in the SitePoint article, all you have to do is add overflow:auto to the parent element. Wahuu? Really? Apparently it works, though I haven’t tested it. Apparently there might be some scrollbar problems, and anything that crosses both elements afterwards (such as a footer) does still need to have clear:both in its styling.

Advertisements