IE Nightmares: Holy Grail and Overflow Hidden

I have been working on a recent project (that will hopefully be posted in some sort of listing of my work to be added soon). The design that I worked up required a header of dynamic width and fixed height. Under that are two columns, the left one will have a fixed width [for navigation] and the right one will scale to fit the browser size [for content]. Finally, beneath the columns is a footer that expands with the window and has a fixed height. Overall, the design seemed relatively simple, but jumping into this project with a relatively feeble understanding of XHTML and CSS proved an ominous task. The main gotcha with my design was the center columns needed to scale in height to fit their content, but it should allow for either column to be the “highest”. That is, the left (navigation) column could have enough item to stretch the design past the height of the right (content) column and vice versa.

After many hours of combing the Internets and trying to cobble together a working model, I finally found the answer I had been seeking. That is the Holy Grail of CSS. The layout is brilliant and uses a sort of work around by making exaggeratedly tall columns and then hiding the excess with “overflow: hidden”. Perfect. Brilliant. Wonderful. Complete disaster in Internet Explorer.

At this time, I had a nice design and a solid layout that worked in pretty much every modern browser. That is except of course the (tragically) most used browser by percentage on the planet: Internet Explorer. At the time I looked around for a solution for awhile, but eventually backburnered IE compatibility. The harsh truth was that 80-90% of the people viewing this site would likely be using IE (some of which would even be version 6, but that is a whole other can of worms).

Finally I found an unexpectedly simple solution. Apparently there is a nasty little bug in our beloved IE that prevents “overflow: hidden” from functioning in divs that have their CSS position set to anything but relative. Looks like the bug started in IE6 and has “somehow” managed to survive two version revisions…

So this whole situation begs the question: What are they doing over there anyway?

Here a quick example page. Take a look at the source and CSS.