title: How to mimic table with a colspan=2 layout with CSS div layout
body: <p>I have a table layout - 3 cells. Left and right take up 100px, middle is auto sized.</p>
  
  <p>I would like to create a "row" that is split into 2 50% "cells", and put one of the existing 3 cell row in each "cell".</p>
  
  <p>Bad title but hard to describe, but here is what I have so far for the div layout, and below that what I am trying to reproduce for the table layout:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  
      &lt;style&gt;
  
       .container { width: 800px; margin: 0 auto; }
       p {
          display:table;
          width: 100%;
          margin: 10px 0;
       }
       .left {
          display:table-cell;
          width: 100px;
          background-color: black;
       }
       .mid {
          display:table-cell;
          width: auto;
          background-color: red;
       }
       .right {
          display:table-cell;
          width: 100px;
          background-color: green;
       }
  
  
       table { width: 100% }
  
      &lt;/style&gt;
   &lt;/head&gt;
  
   &lt;body&gt;
  
          &lt;div class="container"&gt;
  
              &lt;h1&gt;DIV&lt;/h1&gt;
  
              &lt;!-- one half --&gt;
  
              &lt;p&gt;
                  &lt;span class="left"&gt;aaa&lt;/span&gt;
                  &lt;span class="mid"&gt;aaa&lt;/span&gt;
                  &lt;span class="right"&gt;aaa&lt;/span&gt;
              &lt;/p&gt;
              &lt;!-- /one half --&gt;
              &lt;!-- one half --&gt;
              &lt;p&gt;
                  &lt;span class="left"&gt;bbb&lt;/span&gt;
                  &lt;span class="mid"&gt;bbb&lt;/span&gt;
                  &lt;span class="right"&gt;bbb&lt;/span&gt;
              &lt;/p&gt;
              &lt;!-- /one half --&gt;
              &lt;p&gt;
                  &lt;span class="left"&gt;ccc&lt;/span&gt;
                  &lt;span class="mid"&gt;ccc&lt;/span&gt;
                  &lt;span class="right"&gt;ccc&lt;/span&gt;
              &lt;/p&gt;
  
  
  
          &lt;h1&gt;TABLE&lt;/h1&gt;
  
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td width="50%"&gt;
                      &lt;table&gt;
                          &lt;tr&gt;
                              &lt;td class="left"&gt;aaa&lt;/td&gt;
                              &lt;td class="mid"&gt;aaa&lt;/td&gt;
                              &lt;td class="right"&gt;aaa&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/td&gt;
                  &lt;td width="50%"&gt;
                      &lt;table  width="100%"&gt;
                          &lt;tr&gt;
                              &lt;td class="left"&gt;aaa&lt;/td&gt;
                              &lt;td class="mid"&gt;aaa&lt;/td&gt;
                              &lt;td class="right"&gt;aaa&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td colspan="2"&gt;
                      &lt;table&gt;
                          &lt;tr&gt;
                              &lt;td class="left"&gt;ccc&lt;/td&gt;
                              &lt;td class="mid"&gt;ccc&lt;/td&gt;
                              &lt;td class="right"&gt;ccc&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/RmaKW/2/" rel="nofollow">http://jsfiddle.net/RmaKW/2/</a></p>
  
  <p>I thought I could wrap the first 2 "rows" in a simple float: left, width: 50% div but am not having any luck.</p>