3 Column Layout in CSS

One of the more difficult things I've found in creating decent web sites, is getting a three column, plus header and footer layout going without using tables.  Tables are great and all, but very inefficient, and not very accessible.  Getting the three column layout in CSS to work right takes a bit of work, but once its been done, its super easy to use and play with.  Tie that in with master pages, and themes and you've got a super accessible, easy to modify web site, that is XHTML compliant.

Lets start with the style sheet for the page:

body
{
margin: 0px;
padding: 0px;
}

#header
{
height: 30px;
background: blue;
padding: 10px;
}

#leftCol
{
position: absolute;
top: 50px;
left: 0px;
width: 20%;
background: red;
padding: 10px;
}

#rightCol
{
position: absolute;
top: 50px;
right: 0px;
width: 20%;
background: green;
padding: 10px;
}

#mainCol
{
margin-left: 25%;
margin-right: 25%;
}

#footer
{
margin-left: 25%;
margin-right: 25%;
padding: 15px;
background: yellow;
}

I've added the colours in the columns, header and footer so that you can easily see where things are coming from.  Next, we need to create the html for the page.  This is probably the easiest part:

<div id="header">
header
</div>

<div id="leftCol">
left
</div>

<div id="mainCol">
the quick brown fox jumped over the slow blue turtle
</div>

<div id="rightCol">
right
</div>

<div id="footer">
footer
</div>

And there you have it, a 3 column, plus header and footer layout!  You can see the sample https://www.nocommonground.com/blogSamples/3col.htm