Updated CSS Sticky Footer for 2010 - Works in IE8

Posted on Thursday, March 18th, 2010

I finally updated my sticky footer solution! Yay! It now works in Internet Exploder 8 and is working better in Opera. It no longer uses a clearfix hack, overflow:auto does the trick instead.

My old post for the original version has gotten nearly 300 comments so far. Clearly my most popular post on this blog. I am however considering turning comments off for that post. eeek! I get so many requests for help from those having problems getting it to work and I just don’t have the time to reply to them all.

A big thank you goes to Paul O’Brian who offered suggestions that led to this updated version, and as well he has picked up a LOT of my slack in helping out people in the comments section.

The cssstickyfooter.com website has been featured a few times in places like Smashing Magazine and other major web design resources. Each time it does I get a big spikes in traffic for a few days directly from those articles as well as a ton of Twitter retweets and Stumble Upon stumbles. The server is bracing for the next round that is sure to come.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.

Posted on Thursday, March 18th, 2010

Topic = Web Design

Follow comments via Comments Feed feed.

You can leave a comment, or trackback from your own site.

DoFollow links available for frequent commentors.

14 Comments to “Updated CSS Sticky Footer for 2010 - Works in IE8”

Matthew (5 comments.) on March 18th, 2010 wrote:

Honestly, considering there is a newer version. I would close the comments. No need to discuss something that has become redundant because of a new version.

Stever on March 19th, 2010 wrote:

@matthew, 99% of the questions related to the old version still apply to the new version. The common mistakes of not accounting for margins and padding, placing the footer inside the wrapper, or placing a header outside the wrapper, or using relative or absolute positioning when it’s not needed, etc.. will continue to confuse people.

Perhaps though I should redirect comments to this post, or a new post.

Michelle (1 comments.) on April 6th, 2010 wrote:

Hiya,

I firstly wanted to say thanks so much for this solution - I’ve implemented it and it works great in Chrome and Safari, but I am having trouble with some others:

In Firefox and IE8 the footer doesn’t stick to the bottom of the page.

In Opera there’s a large amount of blank space randomly at the top. (I have included the Opera fix in the code however.)

I was hoping you oculd help me? I know Firefox has only recently updated, would that be a reason it doesn’t work in there?

Thanks in adance!

Michelle

Peter on April 7th, 2010 wrote:

Hey,

thanks for this solution. Funnily enough, the IE8 conditional statement totally breaks the header on my site. Without it, everything works fine. Is this a coincidence or did I do something wrong?

CSS Sticky Footer that Works in 2009 | Stever.ca on April 12th, 2010 wrote:

[…] This sticky footer solution has been updated since the launch of Internet Exploder 8. More recent blog post about it is here. Most the typical problems some people encounter are the same and many have been discussed in the […]

Frankie (1 comments.) on April 28th, 2010 wrote:

I’ve sat here for the past 3 days implementing your sticky footer into one of my websites here at work and the footer just refuses to work in IE8. It works at first, but if the window is resized (or people on lower resolutions) the footer appears in the middle of the page on top of my content. Extremely frustrating.

alex (3 comments.) on August 11th, 2010 wrote:

Hi stever,

I’ve come across a slight problem regarding z-index and your footer solution…

I have a .png file floating on top of everything in the page - aligned to the bottom and positioned left (relative to the wrap/container).
In Firefox it displays correctly - but in IE is displayed underneath the footer(w/background). Not amount of messing with the z-index seems to solve this - any suggestions?.

armyn on August 12th, 2010 wrote:

i had a gap under my footer everytime the site was so long that it had scrollbars.
the problem was: the wordpress theme i used already used an old clearfix hack for the main div…
when the clearfix css was deleted, it worked perfectly. and the sticky footer’s #main{overflow:auto;} already does the clearfixing anyway.

Aaron (1 comments.) on October 5th, 2010 wrote:

I found a good addition to the css sticky footer.

Often when using the code I find that if my footer content gets to big the page will be given scrollbars (even if the content is shorter than the bottom of the page).

To fix this, I add overflow: hidden; to the footer div.

Ashley Fleishel (1 comments.) on October 7th, 2010 wrote:

This worked great!! Thanks!

Nadi on December 1st, 2010 wrote:

Thank you so much for this solution. It works in all the browsers.

Michael Torfs on December 14th, 2010 wrote:

The updated solution shows a problem in IE6 and IE7: an annoying vertical scroll bar is added to the viewport even when the content part s fully displayed. The scroll bar should only appear when the content part is longer than the viewport minus the footer.
I tried also on your website (http://www.cssstickyfooter.com/), and there I also het the scrollbar. So I don’t think I’m doing something wrong. You see it already if you put IE8 in IE7 mode. Then the scrollbar appears.

Michael Torfs on December 14th, 2010 wrote:

Sorry about previous comment, seems the vertical scroll bar was also there in the older version. On your website it is not really annoying, it is there. But on my website If I make the viewport-width smaller then 950px (width it was designed for). I get double vertical scroll bars. Very weird. Maybe because I’m using blueprint.

Sam Grainger (1 comments.) on December 15th, 2010 wrote:

Firstly, you rock.

Secondly, setting a body-wide line-height can screw with the footer. Just thought you might want to add that to the ‘known issues’ list.