Chapter 42

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

You can follow any responses to this entry through the RSS 2.0 feed. Respond to this post.