Stacks and Piles

So, in an attempt to make my HTML markup nicer, I’ve been relying heavily on CSS these days to do my basic column layouts. While Andy Budd’s book on CSS Mastery has been a godsend, I’ve noticed some mistakes with the CSS layout related section, more notably with the “Faux Column” trick.

The problem occurs with the containing div surrounding the columns. Let’s say for instance you have a two-column layout with a navigation div floating to the left and a content div floating to the right surrounded by a wrapper div. While add the faux column background image works in IE 7, with Firefox, you’ll notice that the background image does not show up. Since the columns utilizing floating, this effectively takes the two floating divs out of the flow of the document, hence the wrapper div background not applying itself.

The fix: adding “faux” content and bringing the wrapper div into flow of the document by doing this …


.clearfix:after {
content: ".";
clear: both;
height: 0;
visibility: hidden;
display: block;
}
.clearfix {
display: inline-block; /* Fixes IE/Mac */
}


While IE 7 will be a little more forgiving about this, Firefox will interpret the descendent selector and add the hidden content to the wrapper div (saying that you did something like this:
<div id="wrapper" class="clearfix"><div id="navigation"></div><div id="content"></div></div><)