Yet Another CSS Based Column Layout

Published on 1 Nov 2007 at 11:46 pm.
Filed under Uncategorized.

The concept of a CSS column based layout has been written about to death. We all have our favorite method of accomplishing it, be it floats or absolute/relative positioning, but no one seems interested in using the simplest method available display: table;.

The reasoning behind this stems from the fact that Internet Explorer does not support this property, and it is only fairly recently that the standards compliance crowd has begun to advocate the use of Internet Explorer’s proprietary use of conditional comments. We now use conditional comments instead of CSS hacks, like the * html, but we have not yet fully taken to the practice of giving Internet Explorer a completely different layout structure from everyone else.

While branching out into different layouts might be a bit of a headache for maintenance, it can also open up opportunities by removing barriers. For example, imagine the following layout:

With this layout we can imagine the top left side will hold a small logo, while the top right has the site’s title. The bottom left will contain the navigation and the bottom right is the actual content. Obviously you want the the colors to stretch if the content is incredibly wide. This is pretty damn simple with a table based layout, but any self respecting standards-aware designer would know that a <table> tag should be used for tabular data, not layout. That said, said self designer should not be opposed to changing the default display property of an element. Heck, that’s the whole point of having it available. Let’s look at the simple markup:

<div id="wrap">
	<div id="top" class="row">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div id="bottom" class="row">
		<div class="left"></div>
		<div class="right"></div>
	</div>
</div>

And let’s start with the following mark CSS:

html, body, #wrap { width: 100%; height: 100%; margin: 0; padding: 0; }
#wrap { display: table; }
.row { display: table-row; }
.left, .right { display: table-cell; }


The very first line will remove the margin and the padding and set our page to use the full view-point. The display: table is really only necessary for Safari, as Firefox would handle the layout fine with the default value of block for the div, but since we’re already using the table-row and table-cell there is no reason why it would be wrong to not include that. And Safari is a nice browser to support. 🙂 I’m not sure if Opera needs the display: table like Safari does, but it definitely works with it there.

Now let’s add a few rules to set the background colors, the left width and some padding.

.left { width: 150px; background: #0072BC; }
.right { padding-left: 20px; }
#top .right, #top .left { height: 60px; border-bottom: 15px solid #DF9422; }
#bottom .right { background: #99CCCC; }


As you can see from my working example, we have Yet Another CSS Based Column Layout that works in all standards aware modern browsers. 🙂 Oh course, it’ll fail miserably in Internet Explorer, so let’s add a conditional comment to fix this:

<!--[if lte IE 7]>
<style type="text/css">
#wrap { overflow: hidden; }
.right, .left { float: left; }
.right { width: 100%; margin-right: -170px; } /* .left's width + .right's padding-left */
#bottom .right, #bottom .left { margin-bottom: -9999px; padding-bottom: 9999px; } /* stretch the background colors the rest of the viewpoint */
</style>
<![endif]-->


Update: After a little bit of back and forth testing with Internet Explorer 6-7 (I wish Microsoft made it easier to test in both), the above set of rules are the definite set needed to get everything working in both versions.