Matt Snider JavaScript Resource

Understanding JavaScript and Frameworks

Saturday, December 29, 2007

Faux Columns

This past week has been really crazy: 3 Christmas celebrations, 1 Birthday, and family staying over for the last 3 days. Consequently, I have not succeeded in a finishing my xJson Object article. So instead of discussing xJson, today we will discuss a simpler, but very useful technique, known as Faux Columns.

The Problem:
If you have ever tried to design a two-column layout without using tables, you should know that the two columns (by default) will not be the same height. This is normally not a problem until you want a line of some kind dividing the columns. This line should be the height of the tallest column. Initially, you might think that adding a border-right to the left column or a border-left to the right column, will do the trick. However, because one column may (and probably will) be larger than the other, borders will not work. The simplest fix is to apply a height to both columns and call it a day. However, many layouts have dynamic content, such as this blog, and you will not be able to specify a height.

The Solution:
There are many different solutions to this problem (including JavaScript, CSS hacks, etc.), but the simplest (and x-browser safest) one is Faux Columns; it requires no hacks, only good HTML and CSS design. Faux Columns were first introduce by A List Apart. Since, the column height can be dynamic, instead of applying a background or border to the columns, you wrap the columns inside an element and apply a background style to that element. That background style will have your column background and border styles. For example, lets assume you use the following HTML:

Example 1: Simple HTML

...
<body><div id="doc">
	<div id="header">This is my header</div>
	<div id="main">
		<div id="sidebar">Put sidebar elements here</div>
		<div id="content">Put content elements here</div>
		<div class="clearfix"></div>
	</div>
	<div id="footer">This is my footer</div>
</div></body>
...

And you want to use this HTML to produce a two column layout with a column-independent header and footer:

Example 2: Layout

faux layout example

Then apply the following styles (I recommend using reset.css and base.css as well):

Example 3: Styles


/** Center the doc div; excluding IE, see IEHacks for more info on how to do this in IE < 6 */
#doc {
	margin: 0.5em auto;
	overflow: hidden;
	width: 90em;
}

/** Replace these with whatever styles you prefer */
#header {
	border-bottom: 1px solid #830A04;
	height: 3.6em;
}

/** Creates the faux column */
#main {
	background: #EFEFEF url(../images/bg/column.gif) 25em 10px repeat-y; /** faux column graphic */
	clear: both;
}

/** Right column */
#content {
	float: right;
	width: 64em;
}

/** Left column */
#sidebar {
	float: left;
	width: 24em;
}

/** Replace these with whatever styles you prefer */
#footer {
	background-color: #FFF;
	border-top: solid 1px #000;
	clear: both;
	padding-top: 1em;
}

/* (en) clearfix method for clearing floats */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* (en) essential for Safari browser !! */
.clearfix {
	display: block;
}

I prefer my designs to be 100% elastic so that they are accessible and have used ems to specific widths. However, you could just as easily use pixels and a fixed layout. If you use the ‘reset.css’ and ‘base.css’ then 1em = 10pixels. In this example, the background image is a solid color with the column divider graphic on the left side, and the sidebar color is specified by the background style of main. This way, I simply offset the background image to the width of the sidebar, and it scales to all font-sizes. The only constraint on the background image is that it needs to repeat vertically, otherwise, you will not get the column effect (so you need to create a repeating vertical pattern).

If you use a fixed layout and want a less plain sidebar design, then do not offset the image. Instead offset the column divider in your graphic to the width of the sidebar (or wherever you need the gutter).

You might be wondering why the empty div with class ‘clearfix’ is there. This is needed because the ‘main’ div’s height will not reflect the height of the content floating inside it. The ‘clearfix’ div forces an empty div to be placed at the end of the columns that clears both the left and right float. This non-floating element, is positioned after the tallest floating content and causes the ‘main’ div to then expand to the height of the largest column.

Here is a simple example that uses a double vertical line to divide the columns.

posted by Matt Snider at 3:43 pm  

6 Comments »

  1. Another nice article. I saw a lot of Faux columns on a lot of websites. But I think that the content should have the background color also. That way the content will show correctly when the image is not completely loaded.

    I saw a lot of WordPress themes that doesn’t specify a background color on light sections, it makes the text unreadable when the image isn’t loaded completely, or when user disabled image displaying.

    By the way,
    Happy New Year!

    Comment by the DtTvB — December 31, 2007 @ 8:39 pm

  2. Oops, it is new year on my country (Thailand), about 3 hours and 20 minutes on yours.

    :P

    Comment by the DtTvB — December 31, 2007 @ 8:40 pm

  3. Happy New Year to you as well.

    I am excited to have an international audience ^_^.

    Comment by admin — January 2, 2008 @ 12:48 am

  4. Matt, the point of the PIE/Aslett clearfix technique is to allow you to be able to clear elements without adding an extra element for clearing. (And why did you leave out part of the CSS for that technique?)

    You don’t even need it here. Simply move #footer inside #main. (You already gave #footer a background-color which would be needed if you hadn’t.)

    Comment by Kravvitz — January 21, 2008 @ 4:09 pm

  5. Krawitz,

    You are right, the PIE/Aslett clearfix, should be added onto the last element in the “main” div (in this case, the “content” div). However, I was having difficulty getting it to work right in all browsers, so I stopped released what was working.

    And yes, footer can be moved into the “main” div with a “clear:both” style applied. The “background” of “footer” will cover the column “background” applied to the “main” div, so you could use:

    …
    <body><div id=”doc”>
    <div id=”header”>This is my header</div>
    <div id=”main”>
    <div id=”sidebar”>Put sidebar elements here</div>
    <div id=”content”>Put content elements here</div>
    <div id=”footer”>This is my footer</div>
    </div>
    </div></body>
    …

    Comment by admin — January 21, 2008 @ 4:39 pm

  6. Not quite. Normally the clearfix class would be applied to the parent of the floated element(s), which in this case is #main.

    In case anyone is unfamiliar with the PIE/Aslett clearfix technique, here are the two main articles about it:
    Contained Floats
    How To Clear Floats Without Structural Markup

    Comment by Kravvitz — January 21, 2008 @ 4:48 pm

RSS feed for comments on this post. TrackBack URI

Leave a comment

Powered by WordPress