Note: You'll want to be viewing this page in IE/Win 6.0 to see the bugs being talked about (older versions of IE were not tested... yet). Also enabling the option to show window contents while dragging will dramatically add to the effect.
Below we have two boxes floated left. Each one has a width of 50% supplied to it. If you try resizing this window in IE, you will see that the right box will sometimes drop below the left and sometimes the box is rendered on the right side of the left box, as expected.
What is going on here? This is a bug I've seen quite a bit and finally decided to put forth a little effort into figuring out the solution. To me it looks like a rounding error. I'm guessing that when IE's render engine calculates the width of each box, there are some widths where the math results in each box being X and 1/2 pixels wide. IE rounds the value up on both. The result being two boxes at X+1 pixels wide, but the full width of the viewport is only X*2+1 pixels wide. Since the right box is 1 pixel wider than the space available, IE drops the box down below the first, where there is plenty of room.
So how to overcome it?
In the past I have found various combinations of position:relative
and height:0.01% on the offending boxes, parent boxes, and such,
have yielded some success.
However, perhaps the best, and certainly most simplest method here is to set the right-margin of the right-most floating element to -1px. This creates the room needed for that 1 extra pixel and the boxes stay side-by-side at all widths.
Below is an example of this approach, with the right box having a -1px right-side margin.
Resize the window all you want, you'll find the boxes render exactly as expected under IE 6/Win.
So what about a three-columns? Below is an example with all three boxes having a width of 33%.
This works fine. But that's because we're only using up 99% of the total viewport's width. That 1% left over is more than 1 pixel and easily covers for the rounding error.
So in this next example, the middle column is set to 34% wide. So we truly have a 100% width for the three boxes.
Sure enough, the rounding error rears its ugly head once again. But once we apply that -1px margin to the right side of the right-most box...
And everything works out fine.
For completeness, here's an example where each box is set to 33.33% width.
Rounding bug abound! But with the -1px fix:
All is well.
Now we get crazy. I've already applied the -1px margin to the right-most box in the two examples below.
Now we're running into some problems. Even with the -1px hack applied, it's still dropping the right-most block down. What gives?
Well, through a little guesswork and a little trial-and-error it seems that you need to take the number of columns you have, divide by 2, and round the result down to the nearest whole number. That is now many pixels you need to compensate for. Apply a -5px right margin to the right-most box and you're good to go. Or you could apply a series of -1px right-side margins on 5 different boxes in the row of 10. Either approach works, but perhaps the -5px to the right-most is best as it will have the least overall effect on how your layout renders.
And with that, you're columns are looking mighty fine.