0

I have tried a bunch of sticky footers, but none of them seem to work properly. A step-by-step explanation on how to do this would be great.

What I am trying to achieve, is having a footer (size of one line- 20px) STICK to the bottom of the page. In other words, if there is not much content, it will be at the bottom of the page, rather than half way up the page (this much I have already achieved). However, if there is a lot of content it won't awkwardly sit on top of the content, it will be at the bottom of the page underneath the content.

Here is the relevant code I have done:

CSS:

    #footer {
font: 12px Georgia, "Times New Roman", Times, serif;
color:#FFF;
background-color:#999;
opacity:1;
text-align:bottom;
position:absolute;
bottom:0;
width:100%;
height:20px;
line-height:20px;
}

HTML:

<div id="footer" align="center" > Terms of Service &nbsp;&nbsp;&nbsp| &nbsp;&nbsp;&nbsp© 2014 (Blank) &nbsp;&nbsp;&nbsp| &nbsp;&nbsp;&nbspPrivacy Policy
</div>

If you preview this code, you will see that it does work as intended, it sticks to the bottom. It's just if you have too much content, then the code is not pushed down, it stays at the bottom of where the page is when you open the website.

user3227878
  • 447
  • 1
  • 5
  • 10
  • possible duplicate of [HTML/CSS positioning "float: bottom"](http://stackoverflow.com/questions/526035/html-css-positioning-float-bottom) – Antony Jan 25 '14 at 02:29
  • if you google `sticky footer html css`, you'll get about 10 different ways to do it.... – Pedro Estrada Jan 25 '14 at 02:59

1 Answers1

0

Use position: fixed on footer and add a padding-bottom: 20px to body, that way the footer will always be at the bottom and if the body content is too large, the padding will make it stay above the footer.

#footer {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 20px;
  text-align: center; //don't user align=center on the tag, it's deprecated
}
body { //or some other element
  padding-bottom: 20px;
}
arieljuod
  • 15,460
  • 2
  • 25
  • 36