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%: enter image description here

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

enter image description here

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.

possible duplicate of [CSS to make HTML page footer stay at bottom of the page with a minimum height](http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height) — Kiee, Mar 22 '14 at 16:33
@for3st if it's an obvius question just provide the answer. I googled a lot and could not find the right solution. Even the link provided by Kiee has not a working solution. — Boel, Mar 22 '14 at 17:51
Well if I google "css footer bottom" first result is (the already linked) http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height which explains your porblem and also provides a link to a lengthy tutorial — Patrick, Mar 22 '14 at 18:21

Bharadwaj · Accepted Answer · 2014-03-24T06:47:00.187

2

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);

edited Mar 24 '14 at 06:47

answered Mar 22 '14 at 16:33

Bharadwaj

2,535
1
22
35

thanks but this way the footer overlaps the content of the div-body – Boel Mar 22 '14 at 16:47
thanks @Bharadwaj, I edited the jfiddle with your suggestions http://jsfiddle.net/RS88D/1/ but the footer is still overlaping the div-body – Boel Mar 22 '14 at 17:35
@Boel How! I am looking at the same fiddle, here its not overlapig! – Bharadwaj Mar 23 '14 at 01:49
@Boel Saw the image, you can still scroll down to see the rest of the content! Since the footer is fixed and content is more, rest of the content will be visible on scrolling. – Bharadwaj Mar 23 '14 at 06:04
thanks @Bharadwaj, I'll upvote your answer but I really would prefer the footer doesn't remain fixed on the screen. I didn't mention that on the question. How can I do to make the footer always at the bottom but not fixed? – Boel Mar 23 '14 at 14:39
@boel it will remain at bottom right? before it was at the bottom of the content. `I'm stuck trying to make the footer stick to the bottom of the page.` This was your requirment. – Bharadwaj Mar 23 '14 at 14:45
Since english is not my native language, I expressed myself wrong. I just wanted the footer at the bottom of the page, BUT it must not be fixed. I'll set your answer as accepted, but If you could please tell me how to preperly remove that fixed property I would appreciate it – Boel Mar 23 '14 at 15:03
@Boel and exactly how it should be? can you explain a little :) – Bharadwaj Mar 23 '14 at 15:16
@Boel As I guess, the footer should fix at the bottom first, then it should be pushed to the bottom as content grow? – Bharadwaj Mar 23 '14 at 15:31
sorry for the delay. The footer should be pushed to the bottom as content grow, but it must never overlap the content inside the div-left. It must be placed always below the content of div-left and at the far bottom. – Boel Mar 23 '14 at 19:34

How to place this div to the bottom of the page

1 Answers1