Man, this morning’s commute was hard work. It’s not very far, but this morning I rode out onto the Tewkesbury road into a headwind that nearly had me going backwards. I bet it’ll have swirled a full 180° by the time I come to ride home, too.

Even so, the ride always becomes more fun when I get into town. Inevitably most of the traffic gets snarled up at some point, so I can often bomb past it all. This morning it was especially good, as I traded places with a rather nice Porsche 911 several times, before eventually beating it to the town centre. Winner!

Right, I’m off to get some new batteries for my head-light. It’s slightly disconcerting when it fades away to nothing as I’m riding around a big scary roundabout…

“Hey Olly, you just hipped off that jump.”
“You what?”
“Yeah, you rode in, took off and swung the bike around under you.”
“Sweet! I had absolutely no idea.”

I wouldn’t have the first idea how to hip-jump. The truth is, getting air still scares the crap out of me.

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.