title: div table different cells per row
body: <p>I am wondering if it's possible to create approximately the following table layout using only div tags and css only.</p>
  
  <pre><code>_________________________________________________
  |           |                       |            |
  |           |                       |            |
  |           |                       |            |
  |___________|_______________________|____________|
  |      |       |                |                |
  |      |       |                |                |
  |      |       |                |                |
  |______|_______|________________|________________|
  |           |                       |            |
  |           |                       |            |
  |           |                       |            |
  |___________|_______________________|____________|
  </code></pre>
  
  <p>The main problem I am having is with the second row. Having 4 cells throws off the widths of the first row with 3 cells. Here's my HTML:</p>
  
  <pre><code>&lt;div class="box-table" style="width: 800px"&gt;
      &lt;div class="box-row"&gt;
          &lt;div class="box" style="width: 20%"&gt;&lt;/div&gt;
          &lt;div class="box"style="width: 45%"&gt;&lt;/div&gt;
          &lt;div class="box" style="width: 35%"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="box-row"&gt;
          &lt;div class="box" style="width: 15%"&gt;&gt;&lt;/div&gt;
          &lt;div class="box" style="width: 15%"&gt;&gt;&lt;/div&gt;
          &lt;div class="box" style="width: 40%"&gt;&gt;&lt;/div&gt;
          &lt;div class="box" style="width: 30%"&gt;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="box-row"&gt;
          &lt;div class="box" style="width: 20%"&gt;&lt;/div&gt;
          &lt;div class="box"style="width: 45%"&gt;&lt;/div&gt;
          &lt;div class="box" style="width: 35%"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>.box-table {
     display: table;
     border-collapse: collapse;
  }
  
  .box-table .box-row {
     display: table-row;
  }
  
  .box-table .box {
     display: table-cell;
     text-align: left;
     vertical-align: top;
     padding: 5px;
  }
  </code></pre>
  
  <p>Is this possible, or do I need to make each row into a separate table? Thanks and appreciate it.</p>