Last year I changed the theme on this blog and my other ones to make use of Matthew Levine’s Holy Grail approach to layout – or rather, a simplified version of it, since I only need two columns. My motivation for doing this was to render the content before the sidebar (for impatient and mobile users, as well as for SEO), yet have the fixed-width sidebar float on the right and leave the remaining space to the content. Although simplified for two divs instead of three, wedging it into an existing style sheet was anything but simple. I wrestled with padding and margins until I got it working for Firefox and IE7. In Opera and Safari, the sidebar kept popping out below the content, and (with apologies to their users) I didn’t care enough about those browsers to spend any more time trying to remedy this mostly cosmetic issue.
Enter Chrome. It’s such a fast browser that I decided to start using it as my default for a while. Of course, it uses WebKit for rendering, same as Safari — so sure enough, my sites had the same bug, only you’d see it faster. I decided it was time to do something about my problem.
One of the reasons why I never figured out what was going on in Opera or Safari is the dearth of web debugging tools available for those browsers. Chrome adds a JavaScript console that also shows you the dimensions of the sections and what styles actually get applied to them. Turns out, though, that confusion over CSS inheritance wasn’t my problem.
As usually happens when you can’t figure out a problem, I had more than one. So tweaking one of those settings wouldn’t show me any difference. But, by carefully progressing from the working model to my version, I was finally able to ferret out the buggers.
First, Matthew’s approach sets the main fluid (center) section to a width of 100%. But my theme set the width of an outer box to 96%. That apparently allowed WebKit (and Opera’s Presto engine) to extend the logical edge of the inner section outside the outer box, squeezing out the sidebar. I removed that outer 96% setting and changed the inner one to 96%, letting the inner divs push the outer one out.
Second, it appears that WebKit and Presto count border widths in addition to the width specified for a section. Those widths had to be added to the size of the padding for the container and the negative margin used by the sidebar, to prevent two pixels of borders from squeezing out a 200+ pixel sidebar.
The net result moves the sidebar a little to the left from where it was in Firefox before, but I can live with that. Let me know if you spot any other Knights Who Say Ni!