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.
I discovered that double margin thing when working on SCUK, took me all day to track that sucker down (ok maybe an hour), can we just bomb Miscrosoft?
and if we do that well maybe we can do Microsoft too :)
“There are some slight layout issues (gaps between columns) in Opera 9.02”
Also in FFox 1.5 – a small gap between the middle and right hand columns. Apart from that, sterling work chap.
I think the Firefox gap is a slight rounding error (could be in their maths or mine) – I can live with that. The Opera ones are a bit more serious though – a good 10-20px :(
maths sucks
I try to make everything have a wide enough bit of whitespace so any maths errors isn’t obvious.. of course not always idea.
You don’t need negative margins to achieve the layout you want yet still publish the main content text before the two sidecolumns.
Look at my site with CSS turned off and you’ll see what I mean.
Can’t remember where I learnt the trick, but here’s another example…
http://www.pixy.cz/blogg/clanky/css-3col-layout/
@Nick – That example has the central column after the main content, which is quite the opposite of what I want ;-)
Your site uses absolute positioning for the sidebars, which causes me problems. I probably should have put this in the blog post, but in this case I needed the footer to clear all three columns, regardless of the content.