Three Equal Height Liquid Columns In CSS

Presenting this code to demonstrate a couple concepts: gutter images on 3 liquid columns, and a generic column system. It may not work copy-paste. Also, I’m not going to bother explaining anything, or even demonstrating how the classes “double column” work with “single column”. The class clearfix is common enough, find it somewhere on position is everything, and to see what the heck I’m doing with those universal selectors (*) read liquid gutter dilemma.

The HTML:

<div class="section">

   <div class="gutter clearfix">
       <div class="single column">
          <p>Blah blah blah.<p>
       </div>
       <div class="single column">

          <p>Blah blah blah.<p>
          <p>Blah blah blah.<p>
       </div>
       <div class="single column">
          <p>Blah blah blah.<p>

       </div>
   </div>
</div>

The CSS:

.section { background: transparent url(../img/bg_gutter.gif) repeat-y 66% 0; }
.gutter { background: transparent url(../img/bg_gutter.gif) repeat-y 33% 0; }
.column { float: left; }
.column * { margin-left: 15px; margin-right: 15px; }
.column * * { margin-left: 0; margin-right: 0; }
.single { width: 33.2%; }
.double { width: 66.4%; }