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?

 

Do you have the link of your work so that i can see and pin point the exact problem?

 

On your footer, simply add: { clear: right; }

 

Finally I found the solution googling a little bit more:
http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/

Thanks for your time guys!

 

See my footer locked to bottom of viewport demo. Forcing the footer to the bottom even when the page's content doesn't justify it is a holdover from the print medium. It's really not appropriate to the web, and it's surely not worth the aggravation. From a graphic design pov, having the footer occupy its natural place is not a Bad Thing®, witness Google's entry page, an elegant design.

Study my two column—apparent equal height demo. Pay attention to the manner of enclosing the the float element. (The background image is an option, simulating equal length columns.)

cheers,

gary

 

You also might try adding positon:relative; after the clear:right;