"CSS Sticky Footer"
How To Make a Footer Stay at the Bottom of a Website. How To/Bug Fixes referenced in the demo.
The CSS
* {
margin:0;
padding:0;
}
html, body {
height:100%;
background:#999;
}
#wrap {
min-height:100%;
width:1000px;
margin:0 auto;
background:#ddd;
border:solid;
border-width:0 1px;
}
#wrap:before { /* Opera and IE8 "redraw" bug fix */
content:"";
float:left;
height:100%;
margin-top:-999em;
}
* html #wrap { /* IE6 workaround */
height:100%;
}
h1 {
text-align:center;
padding:20px 0 200px; /* padding-bottom equals height of #foot - add this to last tag inside wrap - can be anything - a div, a p, and etc */
}
#foot {
height:200px;
width:1000px;
margin:-200px auto 0; /* negative margin-top equals height of #foot */
background:url(images/sticky-foot.jpg);
}
The HTML
<div id="wrap"> <h1>STICKY FOOT!</h1> </div> <div id="foot"></div>
