title: Even column heights without using a TABLE
body: <p>Is there a way to have two columns, that match each other in height, without using table cells, fixed heights or Javascript?</p>
  
  <p><strong>Using a TABLE</strong></p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td style="background:#F00;"&gt;
              This is a column
          &lt;/td&gt;
          &lt;td style="background:#FF0;"&gt;
              This is a column&lt;br /&gt;
              That isn't the same&lt;br /&gt;
              height at the other&lt;br /&gt;
              yet the background&lt;br /&gt;
              still works
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;   
  </code></pre>
  
  <p><strong>Using DIVs</strong></p>
  
  <pre><code>&lt;div style="float:left;background:#F00" &gt;
      This is a column
  &lt;/div&gt;
  &lt;div style="float:left;background:#FF0" &gt;
      This is a column&lt;br /&gt;
      That isn't the same&lt;br /&gt;
      height at the other&lt;br /&gt;
      yet the background&lt;br /&gt;
      still works
  &lt;/div&gt;
  &lt;div style="clear:both;" &gt;&lt;/div&gt;
  </code></pre>
  
  <p>The goal is to make both backgrounds extend the full height regardless of which side is taller.</p>
  
  <p>Nesting one in the other wouldn't work because it doesn't guarantee both side are the correct height.</p>
  
  <p><strong>Unfortunately, the preview showed the working HTML, but the actual post stripped it out. You should be able to paste this into an HTML file and see what I mean.</strong></p>