With the advent of higher resolutions, bigger screens and blogs, 3-column layouts have become increasingly popular. But wanting and achieving are often not the same thing and the perfect answer to 3-column layouts is, as some describe it, “The Holy Grail”. You don’t want to mess around with absolute settings which require pixel-perfect placing. You do want the columns to appear to be the same length. You would like to be able to place the columns in any order within your HTML, so that you can tempt the search engines by placing your content-rich column at the top of your code. Unfortunately there are many attempted solutions but I am not aware of any which fulfil all those requirements.
This solution (I should probably be crediting someone with it, but it’s cobbled together from observation and experience over the years) is the one to use when search engine appeal is your priority. It has a major drawback, which is that unless you can dispense with a footer, you must know which is going to be the longest column. Your page will look horrible if you get it wrong. Nor does it attempt to equalize the columns, so if your design demands that they appear to be the same length, you will have to resort to the use of a background image to fake your columns (aka “faux columns”).
Otherwise it is a very neat solution which uses only one CSS “hack” (to compensate for Explorer’s strange treatment of margins). Tested in IE6 and FireFox, it provides fixed-width columns for navigation or whatever, plus a fluid center column which expands and contracts to fill whatever resolution your visitors are using. You may copy the code below and adapt it for your own use.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3-Column, Search-Engine Friendly Layout</title>
<style type="text/css">
/* globals */
body {
margin: 10px;
padding: 0;
background: #FFFFFF;
font: 12px Verdana, Geneva, sans-serif;
color: #000000;
}
p,pre {
margin: 0 10px 10px 10px;
}
h1 {
margin: 0;
padding: 10px;
font-size: 14px;
}
/* structure */
#header {
height: 40px;
}
#leftcolumn {
position: absolute;
left: 10px;
top: 50px;
width: 200px;
}
#centercolumn {
margin-left: 200px;
margin-right: 200px;
padding-bottom: 10px;
}
#rightcolumn {
position: absolute;
right: 10px;
top: 50px;
width: 200px;
}
*html #rightcolumn {
right: 9px;
}
#footer {
height: 40px;
}
/* fonts etc */
#leftcolumn p, #rightcolumn p {
font-size: 10px;
}
</style>
</head>
<body>
<div id="header"><h1>3-Column, Search-Engine Friendly Layout</h1></div>
<div id="centercolumn">
<h1>centercolumn</h1>
<pre>
#centercolumn {
margin-left: 200px;
margin-right: 200px;
padding-bottom: 10px;
}
</pre>
<p>The big plus of this layout is that, within your HTML, the columns can appear in any order, which means you may place your most content-rich block at the top of your code: the best place for search engines to find it. But it also has a serious limitation, namely that unless you can dispense with a footer, you must know which is going to be the longest column and adjust the code accordingly. In this example, the center (content) column is assumed to be the longest.</p>
</div>
<div id="leftcolumn">
<h1>leftcolumn</h1>
<pre>
#leftcolumn {
position: absolute;
left: 10px;
top: 50px;
width: 200px;
}
</pre>
</div>
<div id="rightcolumn">
<h1>rightcolumn</h1>
<pre>
#rightcolumn {
position: absolute;
right: 10px;
top: 50px;
width: 200px;
}
*html #rightcolumn {
right: 9px;
}
</pre>
</div>
<div id="footer">
<h1>footer</h1>
</div>
</body>
</html>
In this example, we want a 10-pixel margin around the page and we have a 40-pixel tall header. Thus the left column is placed 10 pixels from the left of the screen and 10+40=50 pixels from the top. The right column is placed according to the same principle. If your header is a different size, or you want different margins or column widths, just change the numbers accordingly.
Because the center column is intended to be fluid, no width is stated for it, only left and right margins, which in this example, are the widths of the side columns (200 pixels). If you want to create a space between the center column and those on either side, simply increase the size of those margins.
And that is all there is to it. In another article I shall cover a less finicky 3-column layout, albeit one with less SEO appeal.
I don’t like having to remember to put left and right margins on every element, so that paragraphs and the like do not butt up against column borders. Therefore normally I would use padding applied to the block as a whole. However, because that introduces cross-browser compatibility issues which would have confused this presentation, I decided to sidestep them here and leave that topic for another article.