css (RSS)

CSS: How to make a footer which really stays on the bottom

March 30, 2008 in css

One problem Jonathan Longnecker run into pretty frequently when coding a site in to XHTML and CSS is making his footer dock to the bottom of the screen. It’s especially annoying if you have a page that’s short on content and the footer, which happens to be a different color that the body background doesn’t stay at the bottom of the browser window:

I can hear you say, “But why don’t you just do a fixed position on it. That’s easy enough.” True, but if you do that then it’s always at the bottom of the screen no matter how tall the window is. So if I have a page with a lot of content that footer shouldn’t show up until the content is done. How do we fix this? Let me show you. Here’s what the problem looks like:

Footer is broken

This tutorial assumes a few things: 1. That you know basic HTML formatting, and 2. That you have a pretty good understanding of CSS.

Please also consider to check out another method called sticky footer.

Related topics: ,
Share: Digg | Del.icio.us | Stumble | Reddit | Float | Technorati
Enjoyed post? Please support and buy us a milk
Whatever you want to say!
Leave a Comment »
Leave a comment!
Note: You can also use your free Gravatar avatar on Knowtebook! Please also read our Publishing Policy before posting.

Yes, I would like to receive notification on incoming comments!

Trackbacks/Pings
Trackback-URL