Picnic Website Code Tutorials

"CSS Sticky Footer"

View Demo

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>
		

Sponsors

Top Donators

Friends of Mine