First we have a containing div called #wrap. Inside that go the header and the content. There's also an #inner-wrap div which contains the floated menu on this page and leaves space for the footer.
<div id="wrap">
<div id="header">Header</div>
<div id="inner-wrap">
<div id="content">Content</div>
</div>
<div id="footer">Footer</div>
</div>
Body and html are 100% height while the wrap div is a minimimum of 100%. IE doesn't understand 'min-height', but it treats 'height' in the same way as a good browser would treat 'min-height', so we use the '* html' hack.
html {height:100%;}
body {
margin:0;
padding:0;
height:100%;
background-color:#ffffff;
}
#wrap {
min-height:100%;
position:relative;
}
* html #wrap {height:100%}
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;
}
* html #inner-wrap {
height:1px;
}
#footer {
position:absolute;
bottom:0;
height:80px;
background-color: #333333;
width:100%;
}
And that's about it really...