So you have heard about Faux Columns…whoopie! This is not the first time Faux–Columns have been discussed just in case you were wondering. It’s a hot topic and trick used throughout the Web Design industry, but implemented very differently by many web designers.
The term “Faux Column” is a technique used with CSS that allows columns to appear equal in height without having the actual height declared in your style sheet. This is achieved by using a background-image repeating in the y-axis behind the floated columns parent container. Lets take a look at the following example.
Since the columns are floated, the background does not extend all the way down to the bottom which is where
overflow:auto; will come in to play. Since the columns are floated they have removed the space of the parent container they rest in. When the
overflow:auto property is applied to the floated elements parent container it helps to open this “parent” container up once again and allow our image to extend to the bottom where we want it to be. Giving us -you guessed it- Faux-Columns.
In the example link given, we are using a CSS helper class from the HTML5 Boilerplate framework called
.clearfix on our floated elements parent container in the HTML. This trick eliminates the need for the
overflow:auto; property on the parent container within the CSS. Pretty sweet Ethan.
The live example is a further investigation taken from Ethan Marcotte’s discussion on Responsive Web Design published by A Book Apart.