The trick to this layout is to have a reference to page height. A container set to a minimum of 100% of screen height can do this, but the container's parent and its parent (body and html) need to be locked to the 100% height as well. If the footer follows the main container, it can be given a negative top margin equal to its height, which "pulls" it back up over the main container. A bottom padding on the content div will ensure that content does not go behind the footer. As IE6 doesn't understand minimum height, it gets the 100% height (which it treats like minimum height) applied via a * html hack.
Consider this simple layout:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
#wrapper {
width: 800px;
margin: 0 auto;
min-height: 100%;
}
* html #wrapper {
height: 100%;
}
#header {
height: 80px;
}
#content {
padding: 10px 10px 37px;
}
#footer {
width: 800px;
height: 20px;
margin: -27px auto 0;
padding: 5px 0 2px;
background-color: #FFC820;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><h1>header</h1></div>
<div id="content">Content Goes Here</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
Cheers
Graeme