CSS footer doesn't stick to the bottom of the page - css

Question

I'm having some difficulties in setting up a sticky footer in my css layout. I've been trying to go with the idea from http://www.cssstickyfooter.com/ but the footer doesn't stay at the bottom of the page if the content in the divs isn't high enough.
The css file:
* {
margin:0;
padding:0;
}
body {
height:100%;
margin:0px;
padding:0px;
}
#wrap {
min-height: 100%;
}
#container {
overflow:auto;
padding-bottom: 150px;
text-align:left;
width:800px;
margin:auto;
}
#header {
height:240px;
margin-top:20px;
}
#navigation {
float:left;
width:800px;
margin-top:20px;
}
#content-container {
float:left;
width: 800px;
}
#left {
clear:left;
float:left:
width:480px;
height: auto;
margin: 20px 0px 20px 0px;
padding: 20px 10px 20px 10px;
}
#right {
float:right;
width:275px;
height:auto;
margin: 20px 0px 20px 0px;
padding: 20px 10px 20px 10px;
}
#footer {
position: relative;
clear:both;
height:150px;
margin-top: -150px;
}
#columns {
width:800px;
height:150px;
margin:auto;
}
#colleft {
float:left;
width:400px;
height:150px;
}
#colright {
float:right;
position:relative;
width:260px;
height:150px;
}
The html file:
<div id="wrap">
<div id="container">
<div id="header"></div>
<div id="navigation">
<div id="lang"></div>
</div>
<div id="content-container">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
<div id="footer">
<div id="columns">
<div id="colleft"></div>
<div id="colright"></div>
</div>
</div>

Answer 1

I believe you are missing html { height: 100%; } from your CSS.

Answer 2

Have you considered using position: fixed?
#footer { position: fixed; bottom: 0px; height:150px; }
The reason your example is not working is because your #footer is inside the #wrap, using that CSS the #footer must be outside of the wrap, as it is the wrap which is setting the min-height to 100%, and the #footer is being pulled upwards using the negative margin.
The html tag also needs a height of 100% to work.
So to recap, #footer can't be nested, and html needs height: 100%;
Example here --- http://jsfiddle.net/CK6nt/
Hope that helps! Laurie

Answer 3

In your footer class:
#footer {
position: relative;
clear:both;
height:150px;
margin-top: -150px;
}
Change position: relative; to position:fixed so the class should look like this:
#footer {
position: fixed;
clear:both;
height:150px;
margin-top: -150px;
}

Answer 4

Everything seems fine to me, you just have to add position :absolute so the footer placed out of normal document flow and bottom:0 will help you to bring the footer down the page.
#footer {
position:absolute;
bottom:0;
}