0

So, I have a little problem with my website. I have a footer which won't stay at the bottom of the page if I happen to have little or no text on the page, but If i have enough info/text to cover a page or more, then it stays at the bottom nicely!

I've tried many things but can't find the right parameters. Can anyone help please?

Here is the code to it, I've stripped the unnecessary code of my page and left with the main bits that has to do with the footer etc..

http://jsfiddle.net/ftrng/1/

Just to let you guys know, I've tried this:

{
position: relative;
bottom: 0;
}

Although that fixes the problem for the footer when there is no text but if there is more text then it sort of stays in the middle (fixed)?

Thanks again.

piddl0r
  • 2,431
  • 2
  • 23
  • 35
user2842914
  • 1
  • 1
  • 1
  • relative is wrong for this. set it to `fixed`, or `absolute` - http://jsfiddle.net/ftrng/7/ – Matt W Oct 18 '13 at 14:23
  • Maybe this will help you - http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page?rq=1 – om_deshpande Oct 18 '13 at 14:25

4 Answers4

0

Have a look at sticky footer: http://ryanfait.com/sticky-footer/

You need a wrapper for you content and some push elements. Everything is described there.

user1915746
  • 466
  • 4
  • 16
0

If you want to have footer down on the page without text in contetn, set min-height to content div like this:

#templatemo_wrapper {
    width: 960px;
    padding: 0 10px;
    margin: 0 auto;
    min-height: 500px;
}
Michal Voják
  • 74
  • 4
0

Use this : 

#templatemo_footer_wrapper {
    clear: both;
    position: fixed;
    bottom: 0px;
    width: 100%;
    background: #000000 url(../images/templatemo_footer.png) top repeat-x;
}

http://jsfiddle.net/ftrng/10/

Udan
  • 5,429
  • 2
  • 28
  • 34
-1

I tried the following code and it seems like it works:

position: fixed;
bottom: 0px;
user2888056
  • 1