I wanted to fix the new design so that it read well in Lynx (and by extension in other non-graphical browsers, for instance screen readers). After all, Day 10 of Dive Into Accessibility is to present your main content first, and one of the virtues of my previous design was that it did just that. (Mostly; it did have the calendar links before the content, and they were a mess in Lynx.)
So, no problem, right? My main design was two columns, a content column to the left and a navigation column floated to the right. I should just be able to put the content div first and put the navigation div after. Right?
Except that the order in which floats occur, relative to non-floated content, actually matters. To get things working right, I would either have to float the content div instead or find another approach. But as it turns out, floating the content div was a non-starter because it meant I would have to fix the width of the content div—and even if I set the width to a percentage, I would still run into some ugly layout problems in narrow browser windows.
So I waited. Which turns out to be the correct move, since a solution was posted in the comments at MezzoBlue on Friday that explained exactly how to do what I was looking for. There’s a negative margin the width of the sidebar on the main content div, with a right margin set to the same width. That gets the content div out of the way and leaves enough room for the sidebar.
It’s a tricky little hack, and it scared me sufficiently that I changed the name of the stylesheet to ensure that new browsers would download it so the page wouldn’t look broken. The good news is that means that old pages that haven’t been re-rendered on the static site should still look OK, though they won’t get the correct content order until they’re fixed.
Thanks to Dave Shea at MezzoBlue for asking the question, and to Ryan Brill for providing the solution.