This is the kind of layout that people often want.
The idea is not so difficult.
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 two background images (well, the same image, but used in two different places). The image is 1px high and 200px wide. It goes in the body on the right and in the #wrap div on the left - repeat-y, like so :
html {height:100%;}
body {
margin:0;
padding:0;
height:100%;
background:#ffffff url(bg.gif) top right repeat-y;
font-family:arial, serif;
}
#wrap {
position:relative;
background:url(bg.gif) top left repeat-y;
min-height:100%;
}
* 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 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;
}
The left column is 200px wide (the same as 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;
}
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:200px;
text-align:center;
}
#content {
padding:5px;
margin-right:200px;
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]-->