This is simple.
First we have a containing div called #wrap.
<div id="wrap">
</div>
Inside that go the header, and an #inner-wrap div containing the left sidebar and #main.
<div id="wrap">
<div id="header">Header</div>
<div id="inner-wrap">
<div id="left">Left</div>
<div id="main">Main Content</div>
</div>
</div>
To make the columns look right, we use a background image. The image is 1px high and 200px 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(bg200.gif) top left repeat-y;
min-height:100%;
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 IE6, which is a bit stupid. IE6 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 contains the floated left column and has 80px of bottom padding to make space for the footer.
<div id="wrap">
<div id="header">Header</div>
<div id="inner-wrap">
<div id="left">Left</div>
<div id="main">Main Content</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 bottom padding of 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;
}
The left column is 200px wide (the same as the coloured part of the background image) and float:left, while the #main div is position:relative with a 200px left-margin so we have two sections.
#left {
float:left;
width:200px;
text-align:center;
}
#main {
position:relative;
margin-left:200px;
}
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]-->