Footer does not extend to the bottom of the page on website

Question

Possible Duplicate:
How to force a DIV block to extend to the bottom of a page, even if it has no content?

I been reading for the last few days but yet no solution.

I am writing a website in plain old html and it appears the footer does not want to extend to the bottom of the page. Ive been testing endlessly but still no result.

Here is the code snippet.

<div id="footer">
        <div id="footer_content">
            <p> &copy; 2011 KRG Maintenance - All Rights Reserved - Contact Us</p>
        </div> <!--footer content ends-->
    </div> <!--footer ends-->
</body>
</html>

body{
    position:relative;
    background:#383d43 url(../images/body_bg.jpg) repeat-x;
    color:#000;
    font:62.5% Myriad Pro,Arial,sans-serif;
}
#footer{

    width: 100%;
    float: left;
    clear: both;
    height: 100%;
    background-color: #ffffff;
    background: #1e2329 url(../images/footer_bg.jpg) repeat-x;

}

#footer_content{

    margin: auto;
    width: 943px;
    padding: 17px 17px 0px 0px;
}

I was the Footer to extend to the bottom of the page, yet instead it just hangs with white space below it. I am really puzzled here and it appears other solutions have no fixed it. Any help will be much appreciated.

Answer 1

Robert Harvey's first link looks good: make sure the body itself is large enough to allow the <div> to do what you want.

So, height: 100% for your body should help you out.