How To Create a 100% Height, Sticky Footer, Centered Layout Tutorial

Update 1: Here is the most recent version of my Sticky Footer (updated with browser bug fixes).

These three questions seem to account for about 25% of all CSS questions. Well, maybe not quite that many - but I think we can all agree that it's definitely a lot. Most of the tutorials out there seem to make it all so complicated. It's really not - all three questions can be answered quite simply. First and foremost, reset all browsers to zero. For simplicity sake, I just used the * to reset everything for the example. Feel free to use a different reset method.

* {
margin:0; /* zero out margin */
padding:0; /* zero out padding */
}

100% Height

It takes three steps to make this layout 100% in height. They are as follows, and all that is needed.

html, body {
height:100%; /* gives layout 100% height */
overflow:inherit; /* triggers 100% height in Opera 9.5 */
}
#wrapper {
min-height:100%; /* gives layout 100% height */
}
* html #wrapper { 
height:100%; /* IE6 treats height as min-height */
}

Sticky Footer

It takes three steps to make this footer stick to the bottom this layout. They are as follows, and all that is needed. Here is another sticky footer technique that I'm sure you will find useful.

CSS
p {
padding:0 0 80px; /* bottom padding clears the #footer */
}
#footer {
height:80px;
margin:-80px auto 0; /* -80px sucks it back into the #wrapper */
}
html
<div id="wrapper">

<p>#wrapper div</p>

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

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

Centered

It takes two steps to center this layout. They are as follows, and all that is needed.

#wrapper {
width:700px; /* centered div must be given a width */
margin:0 auto; /* centers #wrapper */
}
#footer {
width:700px; /* centered div must be given a width */
margin:-80px auto 0; /* auto left/right centers it */
}

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>100% Height, Sticky Footer, Centered Layout!</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 */
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 {
height:80px;
width:700px; /* centered div must be given a width */
margin:-80px auto 0; /* -80px sucks it back in & auto centers it */
background:#999;
}
</style> 
</head>
<body>

<div id="wrapper">

<p>#wrapper div</p>

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

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

</body>
</html>

ADVERTISE HERE