Simulating Position Fixed in IE

Good CSS designers know that one of the faults of Internet Explorer 6 is that it doesn’t recognize the CSS property position: fixed. This is a CSS property which allows one element on a page to remain stationary while the other element scrolls, resembling frames in a browser.

Our company launched a web site for Ty Pennington last fall. For this site, the footer, along with the transparent logo at the bottom of every page, not only needed to be stationary, but also always needed to align at the bottom of the page no matter how long the content or the browser window. This is a desgin challenge for any CSS designer.

Luckily, I found a kickass CSS hack that not only allowed me to simulate position: fixed in IE but also solve the other problem I had by always keeping the footer at the bottom of the page. It worked perfectly, but it currently breaks in IE 7. It may be fixable, but I haven’t taken a look at it yet to try and fix it.

Ty Pennington is a site we are really proud of. It uses lots of other tricks with Javascript and CSS to create a beautiful, branded work of art. So go on over there to see how it was done. Also click on the example above and bookmark it so you can do this in the future.