How to place this div to the bottom of the page

Question

I'm stuck trying to make the footer stick to the bottom of the page.

This is the basic layout:

<div id="div-header"></div>     
<div id="div-body">
    <h2>Some content</h2>
    <div id="div-left">Left content</div>
    <div id="div-right">
        right content
    </div>
</div>
<div id="div-footer-bottom"></div>

And this is how I style the footer:

#div-footer, #div-footer-bottom{
    background-color: red;
    border-top: 1px solid #CCCCCC;
    height: 40px;
    padding: 20px 30px;
    text-align: right;

}

#div-footer-bottom{
    position: relative;
    clear: both;
}

As you can see below, the page is rendered OK when the browser is zoomed at 100%:

But if the browser is zoomed at 120%, for example, this is how the page is displayed:

Please take a look at the full code in jsfiddle to discover what I am doing wrong, since I don't know what else to try:

http://jsfiddle.net/RS88D/

Thanks in advance.

Answer 1

Try adding the following css

#div-footer-bottom{
    position: fixed;
    bottom:0;
    left:0;
    clear: both;
    width:100%;
}

For overlapping

Add margin-bottom to the div-left . Margin should be equal to the height of the footer (add padding pixels also). In your case

#div-left
{
  margin-bottom: 80px;
}

Update 24-Mar-2014

For your first fiddle details just add the below and try,

body, html
{
      height:100%;
}

And in the #div-body css, remove min-height: 490px; and add min-height: calc(100% - 190px);