crows to burnaby

I am so excited. I've been plagued for a year by an Internet Explorer bug called the "float drop" bug (detailed nicely here). Basically, if IE tries to put an element next to a floated element, and the non-floated element is too wide for the container block, it drops the non-floated element down to AFTER the floated element.

We have a site with a three-column layout, and many different users entering content into the site. This bug has cropped up from time to time, usually when someone has input an image that's too large for the browser window or a table that's a bit too wide. It has the effect of looking like your content has simply disappeared, because it pushes it down after the left-hand menu. And I've hated having to tell people to alter their content just because Microsoft screwed up, but damn, I could not find the answer anywhere. A few workarounds, but nothing that applied to my situation.

Today I finally got mad enough to dig down and hack out a proper solution. And I found one:

* html #middle {
    overflow-x: auto; overflow-y: hidden; 
    width: expression(document.body.offsetWidth - 400);
}

What this does:

• "middle" is the non-floated container block into which the content goes. There are also columns named "left" and "right" on certain pages.
• The * html bit only applies to IE, so all other browsers will ignore it. This is better known as the Tan hack.
• The overflow statements place a horizontal scrollbar at the bottom of the block, when needed.
• The width takes advantage of Microsoft's proprietary "expression" tag to fix the browser's own bugs - it calculates the width of the block to be the width of the page minus some predetermined offset (in this case, the width of the two columns plus some padding). So IE will pop up the horizontal scrollbar whenever the content exceeds this dynamically-determined size.
• I found I needed to add quite a bit of extra padding to get it to work (I added 50, but probably could have gotten away with less). 10 or 20 more didn't cut it. It's probably extra space for the scrollbar. I could muck with it and see exactly what the difference is, but I'm happy with it as is - in the worst case you have a slightly narrower content window.

I'm very happy with the final effect - the other browsers continue to behave nicely as they already were, and IE shows a discreet little scrollbar at the bottom of the page if the content is too wide. It lets the user view the site in a much narrower window without going wonky. And if the content editor wants to fix the width so the scrollbar doesn't appear, then that's fine too.

Tested in IE5.5 and IE6.0 PC. I hope this helps somebody else out too.