Let's Talk Footers


I am planning out a design for a new design for my gaming news site. However, I’m not sure what I want to do with the footer. Right now our current site uses the CSS to put the footer at the exact bottom of the browser unless there’s extra content. I found that solution from a site:


Anyways, the issue is what type of footer do I use. The one in that example and on my site do come with some problems, extra time designing around it, if there’s ever a bad line of HTML in one of our articles, the footer floats over content and it just looks nasty like that.

Putting it just below our content would mostly work, but on a no results match your search or a 404 page, the footer would crush the content, well at least visually.

What I thought would work would be to turn it off on those pages. But I don’t know if that’s the right approach because in those pages you kind of want to help people to find their way back to usable content.

Another plausible option would be to set a minimum height, however, I think that css line


CSS code is not 100% browser compatible right?

In your experiences, what works best for your footers? What do you think helps keep the footer from over-powering the content, while still being accessible and within a reasonable place for a footer.

I know the technique for putting it at the bottom of the screen, that works fine, but it does add extra code to work around.

How about I simply my query:

What do you guys do for your footers and why do you choose to do it that way?

CSS is pretty close to 100%. There may be some devices which can’t render css, but those are a very small market share. Min-height specifically does not work in IE6 and older. However it treats height as min-height so you can use either the *html hack or ie conditional comments to compensate for those browsers.

There is a technique for forcing the footer to the bottom of the screen.