The source of this page is in a specific order: content, footer, left, header. So the HTML basically looks like this:
<div id="wrap">
<div id="content">content</div>
<div id="footer">footer</div>
<div id="left">left</div>
<div id="header">header</div>
</div>
The #wrap div is what you might imagine - a wrapper or container for the rest of the stuff. Here's the CSS...
#wrap {
position:relative;
width:780px;
min-height:100%;
margin:auto;
background:#fff url(bg.gif) repeat-y;
border:1px solid gray;
border-width:0 1px;
}
780px is small enough to fit on a screen with an 800x600 resolution (without a horizontal scrollbar). The minimum height is so that we can place the footer at the bottom of the screen if there is little content. I think the W3C validator doesn't like the border-width being declared twice, but it's perfectly valid, so...
IE6, being a bit on the crap side, doesn't support min-height. It does, however, apply 'height' in the same way proper browsers apply 'min-height', so we can give that to IE. There are a few ways to do this, but I think the safest way is to use IE conditional comments as it looks like IE7 will be doing things a bit differently. (You'll be able to target versions of IE before 7 by using the conditional comments). This demo is using the '* html' hack for convenience.
* html #wrap {
height:100%;
}
There's something else necessary to make the min-height thing work...
html, body {
height:100%;
}
Why is that necessary? Well, there is a reason, and I've explained it somewhere else - go look for it in one of the other layouts if you're really interested.
The content is placed on the right by using padding. There's 80px of bottom padding to avoid the footer. I also put in a hack to make sure IE's hasLayout thing doesn't give us any trouble.
#content {
padding:100px 0 80px 210px;
position:relative;
}
The footer is absolutely-positioned at the bottom of the #wrap div, so it will be at the bottom of the screen if there is little content.
#footer {
height:80px;
width:100%;
position:absolute;
bottom:0;
}
Next, the left column is absolutely-positioned within the #wrap div.
#left {
position:absolute;
top:80px;
width:200px;
}
The IE hack...
<!--[if IE]>
<style type="text/css">
#content,
#inner-wrap,
#wrap {
zoom:1;
}
</style>
<![endif]-->
One problem with this is that if the content of the left column is longer than your content, you may find it flowing over the footer. I'd just say to make sure that doesn't happen by having more content than navigation.