I’ve ran into this in when building my portfolio and recently Josh has run into this while building a site for a friend. He came to me and asked how I had done it and I couldn’t remember.

So for the both of us, I re-Googled how to do it and found the two articles that help us both achieve our goal with a little modification for our own purposes.

First, I found Get Down! by Matthew James Taylor with a nice diagram of exactly what the problem was. The solution was rather simple and had only one small thing to use conditional formatting for to single out IE6 and earlier browsers. I found for my site that this would 99% of the time show the content div’s contents in the top left of the screen in IE6. Further research found that it has to do with IE6 and hasLayout. The solution for that was to add into the conditional formatting for IE6 a height: 1% and position:relative attribute. This forces IE6 to inherit the hasLayout successfully. Win!

Secondly, there was the site fortysevenmedia and their article, Making Your Footer Stay Put with CSS. This method utilizes negative margins and set heights to your footer. I’m not a fan of using negative margins but this method does work. Kudos on the excellent write up.