I'm using this solution, which has worked for me before:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I'm currently working on a site, and it's not working. I think it's because I'm using absolute position on some divs on the page. Instead of sticking to the bottom of the page, the footer shows up under the header, on top of the absolutely positioned divs. How can I get sticky footer to work in this situation?
<div id="wrap">
<div id="container">
<div id="myDiv">
...content...
... this div is absolutely positioned
</div><!-- END aboutText -->
</div><!-- END container -->
<div class="push"></div>
</div><!-- END wrap -->
<div id="footer">
...footer content
</div>
Actually it's working now. Not sure why - one of those CSS mysteries. Here's a related question though - How do you set a minimum browser height, so that when someone is resizing the browser (making it smaller), the footer stops moving up and covering the content?
Edit - here's the CSS. The footer sticks to the bottom fine, but it covers the content divs on the page if the browser window is small.
html, body {
height: 100%;
}
#wrap{
width:950px;
margin: 0 auto -80px;
min-height: 100%;
height: auto !important;
height: 100%;
}
.push {
height: 80px;
}
#footer{
height: 80px;
background-image:url(../images/img.jpg);
}
#container{
position:relative;
}
#someDivWithinTheContainer{
position:absolute;
left:230px;
top:300px;
}