Mar 30, 2004

Today I’ve made some significant changes to the CSS that powers this site. Significant enough to post about them, primarily to warn that if things look funky on your end, kindly give a refresh and things should pop back into place.
Previously, I was using absolute positioning to control the site’s two columns. Now, I’m using the single float method — floating the content left, while the sidebar takes up the remaining space. This keeps the order of the markup the same way I initially intended — content first, then sidebar.
I’m still using Faux Columns to create the sidebar’s background and fancy siderails. Previously, to make IE6 play nice (its background centering differed by one or two pixels from every other browser… go figure), I was assigning the same tiled background image to both the body and containing wrap elements. IE6 users may have noticed a “shift” while the page loaded. No more. The tiling is now only happening once on the <div id="wrap">.
Using the float method for laying out columns gives me another benefit. I can clear both columns with a full-width footer at the bottom of each page — regardless of the length of either column. Previously, on pages where the content column was shorter than the sidebar, the footer would be appear higher than the bottom of the sidebar’s content. Because we can clear floats, that’s no longer a problem.
Either method has their own pros and cons. Case in point: I ran across some absolutely maddening bugs in IE6 to get this simple, two-column float layout to look proper. Historically, I’ve found absolute positioning to be far easier to grasp and troubleshoot — but the footer issue always bothered me.
So now, we float. And continue to evolve…

About SimpleBits

SimpleBits is the tiny creative studio of designer, author, and speaker, Dan Cederholm. I make websites and things for people like you. Occasionally, I also talk about them here. More →