How do I get my footer to stay at the bottom all the time? :(

[XHTMLboy]

Hello, I'm creating a website but cannot get the footer to stay at the bottom when I set a height. All I want it to do is to stay at the bottom. Help? Thanks The code is in the attached files.

[dsonesuk]

google 'sticky footer' plenty of examples available.

[Charles @ CodeConquest.com]

In your CSS, change:

footer {position:absolute;bottom:0;left:0;width: 100%;height: 3em;-webkit-box-shadow: 1px 0px 8px 0px #000;-moz-box-shadow: 1px 0px 8px 0px #000;box-shadow: 1px 0px 8px 0px #000;background-color: RGBA(1, 1, 1, 0.9);color: RGBA(1, 1, 1, 0.7);}p#copyright{position: inherit;bottom: 30%;left: 50px;color: #FFF;font-family: 'Open Sans', arial, serif;}#top{position:inherit;bottom: 30%;right: 30px;color: #FFF;font-family: 'Open Sans', arial, serif;text-decoration: none;}

to...

footer {position:fixed;bottom:0;left:0;width: 100%;height: 3em;-webkit-box-shadow: 1px 0px 8px 0px #000;-moz-box-shadow: 1px 0px 8px 0px #000;box-shadow: 1px 0px 8px 0px #000;background-color: RGBA(1, 1, 1, 0.9);color: RGBA(1, 1, 1, 0.7);}p#copyright{bottom: 30%;left: 50px;color: #FFF;font-family: 'Open Sans', arial, serif;}#top{bottom: 30%;right: 30px;color: #FFF;font-family: 'Open Sans', arial, serif;text-decoration: none;}

Edited October 26, 2012 by Charles @ CodeConquest.com

[Ingolme]

The problem with fixed position is that the footer is at the bottom of the window, but not at the bottom of the page. The technique called "sticky footer" is there to make a footer at the bottom of the page.