CSS Fixed Footer

A while back I wrote a post explaining how to achieve a sticky footer on your website. I got a comment asking how to achieve a fixed footer. I figured that was a simple enough thing, except I had forgotten about Internet Explorer’s support (or lack thereof) for fixed positioning.

The idea seems easy in thought. Simply give the footer a fixed position attribute. Unfortunately, Internet Explorer doesn’t treat an element as it should. But with a few tricks, you can achieve a nice looking fixed foot that works in all browsers.

View Example

This example center’s the footer using a negative margin. Simply setting the left or right attribute to 50% and then the same margin a negative value of half the footer width will do the trick.

1
2
3
4
5
6
7
8
9

.footer {
  clear: both;
  position: fixed;
  z-index: 10;
  bottom:0;
  left:50%;
  margin-left:-485px;
  width:960px;
}

That’s the basic CSS for the footer. Now the Internet Explorer hack:

1
2
3
4
5
6
7
8
9

* html,* html body { /* Fixes footer shuttering when scrolling in IE6 */
  background-image:url(about:blank);
  background-attachment:fixed;
}
* html .footer {  /* Fix for IE */
  position:absolute;
  bottom:auto;
  top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}

If you have a background images already applied to the body, you can get by by just applying the fix to * html.

And there you have it!

View Example