OK, I know this question has been posed in many cases and it seems the answers vary on a case by base basis.
Here is my situation, I use blueprint grid system and the high level structure is as follows.
So the footer sometimes sticks to the bottom, but when there isn't enough content in the content_container it doesn't. Also if the window is resized the behaviour is unpredictable. Also the list inside the footer always floats to the right and breaks half way through if there isn't much content in the content container, no idea why.
<html>
<body>
<div id='main_container' class='container'>
<div class='header span-24 last'>
</div>
<div class='content_container span-24 last'></div>
</div>
<div class='footer'>
<ul class='footer_link'>
<li>faq</li>
<li>terms</li>
<!--etc -->
</ul>
</div>
</body>
</html>
##css
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
#main_container {
min-height: 100%;
height: auto !important;
height/**/: 100%; /* for IE6 */
}
.footer {
margin-top: -200px;
background:#38385c none repeat scroll 0 0;
height:200px;
position: relative;
}
.content_container {
padding-bottom: 200px;
background-color:white;
}
.footer_links {
/* overflow:hidden;*/
/*text-align: left;*/
/*float: left;*/
/*clear: both;*/
/*margin-left: 1em;*/
height:100%;
padding-left: 0;
white-space:nowrap;
list-style-type: none;
}
.footer a {
color:white;
text-decoration:none;
}