title: Create multiple rows of divs
body: <p>I'd like to create a 2x2 setup, consisting of 4 div elements.  See my <a href="http://jsfiddle.net/QXqEG/" rel="noreferrer">fiddle</a> for my test so far using <code>inline-block</code> for my display.  I'd like to have "div 3" and "div 4" directly below 1 and 2, respectively.  Is there a way to do this without floats?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class = "blocks"&gt;
      div 1
  &lt;/div&gt;
  
  &lt;div class = "blocks"&gt;
      div 2
  &lt;/div&gt;
  
  &lt;div class = "blocks"&gt;
      div 3
  &lt;/div&gt;
  
  &lt;div class = "blocks"&gt;
      div 4
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.blocks {
      display: inline-block;
      border: solid 1px red;
      width: 100px;
  }
  </code></pre>