-1

Possible Duplicate:
How do you get the footer to stay at the bottom of a Web page?

I have a webpage that has a footer, but it doesnt stick to the bottom, even when my content is full. I'm using 

footer {
   position:absolute;
   bottom:0px;
}

The footer stays at the bottom of the SCREEN but not the bottom of the PAGE. You can see an example at http://thomaswd.com/2013prototype/index.html. Resize your browser window so that the content's scrollable. The CSS is at http://thomaswd.com/2013prototype/style.css. You can also find another example at http://thomaswd.com/2013prototype/pricing.html. The CSS is at http://thomaswd.com/2013prototype/style2.css. I am using this for the second example: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Thanks in advance. :-)

Community
  • 1
  • 1
Thomas Lai
  • 317
  • 1
  • 6
  • 15

2 Answers2

0

When you are assigning footer: absolute; bottom:0; that means, it is out side of your container. To solve the problem put you footer inside any container div or section tag.

naresh kumar
  • 2,165
  • 3
  • 19
  • 21
-1

change position:absolute to position:fixed Position absolute takes the element out of the normal flow of content, while fixed does this and sticks it to the page

Cody Guldner
  • 2,888
  • 1
  • 25
  • 36
  • but position:fixed will make it stick at the bottom of the screen; I want it to behave like a normal footer. – Thomas Lai Jan 04 '13 at 02:54
  • then you can't use position:absolute; because then it won't act in the normal content flow. You need to put it after your final content – Cody Guldner Jan 04 '13 at 03:00
  • never mind, i took the footer styles off and put the footer in the
    , and it looks like text but works perfectly.
     – Thomas Lai Jan 04 '13 at 03:07