So having said all that, the way we’re handling CSS columns these days is actually pretty cool. Here’s some sample CSS, from a site in development with a 720px wide content area:
/* Column layouts */
.column { float:left; overflow:hidden;}
.columns { margin-bottom:20px; padding-top:10px; }
.three.columns .first { width:200px; padding-right:20px; }
.three.columns .second { width:200px; padding:0 20px; }
.three.columns .third { width:200px; padding-left:20px; }
.two.columns .first { width:300px; padding-right:20px; }
.two.columns .second { width:300px; padding-left:20px; }
This lets us code the XHTML like this:
<div class="three columns">
<div class="first column">
Column 1
</div>
<div class="second column">
Column 2
</div>
<div class="third column">
Column 3
</div>
<div style="clear:both;"></div>
</div>
… which is pretty nice semantically.
Tags: CSS, free stuff, tables, whitewhale
Comments: None »
You don’t use HTML tables for layout. Every standards-based Web designer knows this.
As of June 2008, this notion is so deeply buried in the conventional wisdom about Web page design that just about nobody ever thinks about it anymore; the idea of using a table for anything other than Tabular Data is met with scorn and derision from developers. And so the lowly <table> tag sits alone in the lunchroom, friendless, with nobody to talk to except its perpetual hangers-on <td> and <tr>.
Now of course, we don’t use tables for layout at White Whale. Ever. How could we? It’d be like driving an SUV, listening to a Zune, or voting Republican— it’s something cool people just don’t do. We (as a company) couldn’t design a site with layout tables and look at ourselves in the morning.
But I don’t like conventional wisdom, and as a result I often find myself thinking about tables— in particular, how there are some things you can do with <table> that you can’t do with <div>, no matter how hard you try. (At least across all browsers, and without using Javascript.) Read more »
Tags: bad habits, CSS, design, guilty pleasures, tables, whitewhale
Comments: 3 comments »