This is simple.
First we have a containing div called #wrap.
<div id="wrap">
</div>
Inside that go the header, the left sidebar and another containing div called #main which contains the content and the right sidebar. There's also an #inner-wrap div which contains the floats and makes space for the footer.
<div id="wrap">
<div id="header">Header</div>
<div id="inner-wrap">
<div id="left">Left</div>
<div id="main">
<div id="right">Right</div>
<div id="content">Main Content</div>
</div>
</div>
</div>
To make the columns look right, we use a background image. The image is 1px high and 780px wide. It goes in the #wrap div - repeat-y, like so :
html {height:100%;}
body {
margin:0;
padding:0;
height:100%;
background-color:#ffffff;
font-family:arial, serif;
}
#wrap {
background:url(bg780.gif) top left repeat-y;
min-height:100%;
width:780px;
margin:auto;
position:relative;
}
* html #wrap {height:100%}
The header obviously covers this at the top. Something else which might also be obvious is that the #wrap div is set to min-height:100% so that the page is, well, at least 100% high. The other bit after that is for IE, which is a bit stupid. IE doesn't understand 'min-height', but it treats 'height' in the same way as a good browser would treat 'min-height' so we're OK. When you tell the browser 'height:100%' though, it needs to know 100% of what? To make it clear, html and body are both set to 100% too.
The #inner-wrap div has 80px bottom padding so there's an 80px-high space at the bottom of the page. After all the rest of the content comes the footer.
<div id="wrap">
<div id="header">Header</div>
<div id="inner-wrap">
<div id="left">Left</div>
<div id="main">
<div id="right">Right</div>
<div id="content">Main Content</div>
</div>
</div>
<div id="footer">Footer</div>
</div>
The footer is 100% wide and absolutely-positioned at the bottom of the #wrap div in the space left by the inner-wrap.
#inner-wrap {
padding-bottom:80px;
}
#inner-wrap:after {
content:" ";
display:block;
clear:both;
}
#footer {
position:absolute;
bottom:0;
height:80px;
background-color: #333333;
width:100%;
color:#FF00FF;
text-align:center;
margin:auto;
}
The left column is 150px wide (the same as the coloured part of the background image) and float:left, while the #main div is position:relative with a 150px left-margin so we have two sections.
#left {
float:left;
width:150px;
text-align:center;
}
#main {
position:relative;
margin-left:150px;
}
The #main div also needs to be split into two - the right sidebar, which is floated right, and the #content div which has a right-margin of 200px.
#right {
float:right;
width:150px;
text-align:center;
}
#content {
padding:5px;
margin-right:150px;
text-align:left;
}
And that's about it really......except for the IE hack we need...
<!--[if IE]>
<style type="text/css">
#content,
#main,
#inner-wrap,
#wrap {
zoom:1;
}
</style>
<![endif]-->