title: Two rows of three boxes, need to scale equally
body: <p>So here's my scenario - I need to have two rows of three divs but all six squares need to be touching without border. When I resize the window, I need the 6 boxes to scale with the window proportionally without distorting the aspect ratio of the background image.</p>
  
  <p>So if you scale the image, I need my six boxes to resize proportionally. The width of the section is 100% and the boxes need to fill the entire width. </p>
  
  <p>Can someone recommend a method for this? Here's the HTML I have from that part of the page... not quite sure what to do with the CSS:</p>
  
  <pre><code>&lt;section class="cases"&gt;
      &lt;div class="row-casebox"&gt;
          &lt;div class="casebox"&gt;
          &lt;/div&gt;
          &lt;div class="casebox"&gt;
          &lt;/div&gt;
          &lt;div class="casebox"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row-casebox"&gt;
          &lt;div class="casebox"&gt;
          &lt;/div&gt;
          &lt;div class="casebox"&gt;
          &lt;/div&gt;
          &lt;div class="casebox"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Thanks!</p>