0

I'm trying to keeping footer at bottom no matter how much text there is in the content. What am i doing wrong? The layout is:

    .top{
    width:500px;
    height:100px;
    background-color:black;
}

.content{
    width:500px;
    min-height:100%;
    position:relative;
}

.footer{
    width:500px;
    height:100px;
    background-color:blue;
    position:absolute;
    bottom:0;
}

<div class="top"></div>
<div class="content"></div>
<div class="footer"></div>

http://jsfiddle.net/RDuWn/68/

Regards, Simon

simon
  • 2,235
  • 6
  • 33
  • 53
  • possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) – Wesley Murch Feb 20 '13 at 15:33
  • possible duplicate of [How to keep footer always at the bottom of a page?](http://stackoverflow.com/questions/14960467/how-to-keep-footer-always-at-the-bottom-of-a-page) – Win Feb 20 '13 at 16:17

5 Answers5

1

I think that you have to use position:fixed like this:

.footer{
    width:500px;
    height:100px;
    background-color:blue;
    position:fixed
    bottom:0;
}

DEMO

Alessandro Minoccheri
  • 35,521
  • 22
  • 122
  • 171
0

I would remove position:absolute; bottom:0; from .footer Fiddle

dezman
  • 18,087
  • 10
  • 53
  • 91
0

in your jsfiddle, 

.footer{
    width:500px;
    height:100px;
    background-color:blue;
    position:fixed;
    bottom:-1px;
}

works for me..

see the fiddle

see bottom:-1px; it will assure your position across the browsers...

Zaffar Saffee
  • 6,167
  • 5
  • 39
  • 77
0

Your code works but you need to set min-height instead of height in your footer class so that it can stretch to your content size.

.footer{
    width:500px;
    min-height:100px;
    background-color:blue;
    position:fixed;
    bottom:-1px;
}

Here's how it will look with that change, and some placeholder content added to the footer.

BumbleB2na
  • 10,723
  • 6
  • 28
  • 30
0

It was your absolute positioning that caused the overlap. An absolute element is removed from the normal flow and becomes "ignored", per se, by the other elements when determining position. If you don't specify a position in the css, it defaults to static positioning and all elements will properly be in the "flow".

http://www.w3schools.com/css/css_positioning.asp

Here's the CSS I used: 

.top{
    width:500px;
    height:100px;
    background-color:pink;
}

.content{
    width:500px;
    min-height:100%;
    background-color:blue;
}

.footer{
    width:500px;
    height:100px;
    background-color:black;
    margin-bottom:0px;
}