Sticky Footer Technique 2 Tutorial

View Demo

It takes four steps to make this footer stick to the bottom this layout. They are as follows, and all that is needed. Here is the previous sticky footer technique.

The CSS

#wrapper {
min-height:100%; 
width:700px;
margin:0 auto;  
position:relative; /* positions the #footer relative to the #wrapper */
}
p {
padding:0 0 80px; /* bottom padding clears the #footer */
}
#footer {
position:absolute; /* positions #footer at bottom of #wrapper */
bottom:0;left:0;
height:80px;
width:700px; 
}

The html

<div id="wrapper">

<p>#wrapper div</p>

<div id="footer"></div><!-- #footer sits inside the #wrapper -->

</div><!-- end #wrapper -->

And... now bring it all together!

<!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>Sticky Footer Technique #2</title>
<style type="text/css">
* {
margin:0; /* zero out margin */ 
padding:0; /* zero out padding */
}
html, body {
height:100%; /* gives layout 100% height */
overflow:inherit; /* triggers 100% height in Opera 9.5 */
background:#333;
}
#wrapper {
min-height:100%; /* gives layout 100% height */
width:700px; /* centered div must be given a width */
margin:0 auto; /* centers #wrapper */
position:relative; /* positions the #footer relative to the #wrapper */
background:#CCC;
}
* html #wrapper { 
height:100%; /* IE6 treats height as min-height */
}
p {
font-size:1.8em;
text-align:center;
padding:200px 0 80px; /* bottom padding clears the #footer */
}
#footer {
position: absolute; /* positions #footer at bottom of #wrapper */
bottom:0;left:0;
height:80px;
width:700px; 
background:#999;
}
</style> 
</head>
<body>

<div id="wrapper">

<p>#wrapper div</p>

<div id="footer"></div><!-- #footer sits inside the #wrapper -->

</div><!-- end #wrapper -->

</body>
</html>

ADVERTISE HERE