IE Floated Columns Totaling 100% Bug
I feel I’ve been blogging a lot about IE bugs so far, which I guess I have; but then, I wouldn’t have to if there weren’t so many! Anyway, this particular bug has no doubt been worked around in many of the column based layout templates available on the web, it may have even been worked around in this exact way, but I didn’t find it. And when specifically Googling for it nothing of any use came up, so hopefully this should help some people out.
If you’ve ever tried to create a liquid column layout by floating a set of divs next to each other, with a total width of 100%, then you’ve no doubt run into this problem, where IE calculates the total width as slightly more than 100%, and ends up wrapping the last column below the others. I assume it’s some kind of rounding error. It’s due to the way IE rounds sub-pixel widths.
See Problem (if it looks right, try adjusting the browser window width)
It’s a pain, but I’ve found a way to fix it using negative margins (again); I’m staring to think negative margins are IE’s best friend. The fix is simple, just apply a negative right margin to the last column, like so:
#right { margin-right: -2px; }
The actual number of pixels you should set it to varies depending on the number of columns you have, but I find a reliable rule to go by is equal to or greater than half the total number of columns. So if you have three columns, set it to two, if you have ten, set it to five, and so on.
This accommodates for the additional width and stops the last column wrapping. It also has no absolutely no effect visually (the last column remains the same width, and stays in the same position). I tried this with 1 pixel but that wasn’t quite enough to fix it completely. I’ve had no wrapping whatsoever with 2 pixels.
This problem exists in both IE6 and IE7, this solution works in both.
Update: John Resig has posted an excellent article describing what causes this and the problems browsers have in calculating the correct widths. I’ve also learnt that this can’t technically be considered an IE “bug”, as the behaviour in this situation isn’t actually standardized. Of course, that doesn’t mean IE’s behaviour is right.