Faux-Column Mayhem

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.

body { background-color: #CCC; }

/*page wrapper*/
#page {
margin: 36px auto;
width: 90%;
}

/* parent container to floats*/
.blog {
margin: 0 auto;
width: 93.75%;
border: 2px solid black;
background: url(bg.png) repeat-y 63.1% 0%;
}/* 900 / 960 */

/*main column*/
.blog .main {
float: left;
width: 62.8888889%;
}/* 566 / 900 */

/*complementary column*/
.aside {
float: right;
width: 36.7777778%;
}/* 331 / 900 */

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.

Faux Column Example

The live example is a further investigation taken from Ethan Marcotte’s discussion on Responsive Web Design published by A Book Apart.

Dennis Gaebel

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design. http://droidpinkman.io.

Leave a Reply

Your email address will not be published. Required fields are marked *

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…
</code></pre>

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview:
    2011/06/30