It’s worthwhile mentioning that a lot of the initial research on multi-column CSS layout for the Wired News redesign was done while studying examples from Eric Costello’s CSS Layout Techniques at glish.com, as well as Rob Chandanais’ Layout Reservoir at bluerobot.com. I started by relying on CSS2’s float property to position boxes next to each other. I ended up switching to absolute positioning for the left and right columns. The switch was made for two reasons:
- Buggy browser implementations of
float— Use offloatstill seems to be inconsistent in some browsers. This is especially true when dealing with widths of children that, when totalled, come close to their parent’s width. The problem with float is that if the width of the parent element is ever less than the total combined width of the child elements, even just so slightly, one of the floated boxes will actually get pushed to the bottom of another floated box, instead of appearing beside it. This is actually correct behavior according to the CSS specification. However, when one of the columns bounces back and forth between two entirely different positions as the browser is being resized, it appears to be buggy behavior. Use of absolute positioning avoids that problem. But it does introduce another issue, where the columns can end up overlapping at extremely small browser window widths. A sacrifice I’m willing to live with for a guarantee that all 3 columns will always start at the same vertical position. - Order of data in the markup — To avoid multiple headaches dealing with the inconsistencies of older/smaller browsers, I’m using the
@importdirective to hide styles from browsers which can’t adequately render them. For Wired News, I wanted the center (Main) column, containing the most important content, to be rendered first in the HTML markup, followed by the Left and Right columns. This would ensure the Main column is rendered first in browsers that get the unstyled content. With thefloatapproach, either the left or right column would always have to come first.