Internet Explorer combination float bug
So, I’m creating a layout that looks something like this:
It’s a fairly simple three-column layout. The thing is, I’ve used some funky negative margin trickery to swap the first and second columns (so that the HTML is displayed in the correct order for non-CSS user agents).
Unfortunately, IE6 renders this:
…except in some hard-to-reproduce circumstances when it gets it right.
It turned out to be a combination of bugs, which made it ever so slightly difficult to track down. First up was The IE Doubled Float-Margin Bug. Adding
display: inline; to the CSS for the floated columns appeared to just make the problem worse, but was in fact needed to correct the issue.
Once that was in place, the page was only correctly rendered once I’d moused over certain links. It took me quite some time to figure out what was going on: IE was incorrectly calculating the funky margins: Instead of basing them on the width of the floated column’s parent element, it was working them out from the body element. I figured that out because the rendering was slightly different dependent on the width of the window.
The solution was to wrap yet another element around the outside, and set the width there too.
I’ve created a simple test-case that explains the solution for the anybody else that runs into the issue.