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

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> ```