Word up, son!

How to create a fixed overlay footer with CSS

I’ve seen various techniques on how to create footers sticking to the bottom of the screen which will expand downward if there’s enough content, but will remain stuck on the bottom of the screen if there isn’t. That’s useful for many sites, however if you want it to overlay above the rest of your content and remain fixed at the bottom of your screen even if there’s enough content to push it downward you’ll need another solution.

The CSS

html {margin: 0; padding: 0;}
body {
	margin: 0;
	padding: 0;
	font-family: Arial;
	background: white;
	font-size: .75em;
	color: #333;
}

#container {
	height: 1500px;
	overflow: hidden;
	margin: 0 auto;
	padding: 0 10px;
}

#footer {
	width: 100%;
	background: #ccc;
	position: fixed;
	z-index: 1;
	bottom: 0;
	padding: 10px;
}

It’s easier than you might think, really. This works in Firefox, Safari, Opera, and IE7.

The Problem

As you might have guessed, this doesn’t work well with IE6. I’ve found that the easiest method to make it work, without having to go into quirk mode, is to use CSS expressions.

And a collective groan fills the air.

Yes, I know, I feel the same way about them, but in this case it works. We can put it in a CSS conditional statement so only IE6 reads and executes it. We can do it like this:

* html #footer {
	position: absolute;
	top:expression(eval(document.compatMode &&
		document.compatMode=='CSS1Compat') ?
		documentElement.scrollTop
		+(documentElement.clientHeight-this.clientHeight)
		: document.body.scrollTop
		+(document.body.clientHeight-this.clientHeight));
}

You can view the example to see the footer in action.

This works and solves the problem. We’re not done yet, though. If you want your page to validate, which you probably should, you’ll need to take that out of your stylesheet and place it in an IE6-specific stylesheet to avoid 2 errors. In order to do so, create a separate stylesheet and call it ie6_styles.css, or whatever you want. Then, after linking your base sheet, add this to your markup:

<!--[if lt IE 7]>
<link href="/stylesheets/ie6_styles.css" media="screen" rel="Stylesheet" type="text/css" />
<![endif]-->

That statement is saying “If the IE version is below 7, process the markup enclosed within these tags”, which means it it loads the ie6_styles.css stylesheet. Validation parsers such as the W3C CSS Validator don’t read through conditional statements so everything will validate nicely.