Footer at the very bottom of page

Hi, my layout has the following structure (application-like):

Header - width 100%
Navbar - width 100%
Left column - width 20%
Right column - width 76%
Footer - width - 100%

Sometimes, the content of the right column div will fill it and it will have an height higher than the window’s height, and sometimes the content will be lower than the windows’ height.

My problem comes with the footer. I want it with a height of 30px and:

  • If there is so much content: at the bottom of the content.
  • If there is no content: at the bottom of the page, not after the content.

I’ve tried with absolute positioning, but when the content fits the window and I scroll, the footer stays in its original position…

If it helps, the footer has a repeat-x gradient background, and columns have no background image.

Any ideas?

I found a tutorial on web, I have used it myself, works great.

Hi, check out the 2column sticky footer layouts at Pauls site.

As for the heights/widths of elements, you can change them to fit :).