title: HTML/CSS grid layout
body: <p>How could I change this grid layout so that the second row of blocks sit just below the corresponding block above it instead of forming a completely new row?</p>
  
  <p><a href="http://jsfiddle.net/AndyMP/wSvrN/" rel="nofollow">http://jsfiddle.net/AndyMP/wSvrN/</a></p>
  
  <pre><code>body {
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
  }
  #container {
      position: absolute;
      width: 60%;
      left: 50%;
      margin-left: -30%;
      border: 1px dotted #333;
      padding: 20px;
  }
  .box1 {
      position: relative;
      float: left;
      width: 100px;
      height: 150px;
      background: #666;
      margin: 0 15px 15px 0;
  }
  .box2 {
      position: relative;
      float: left;
      width: 100px;
      height: 200px;
      background: #666;
      margin: 0 15px 15px 0;
  }
  .box3 {
      position: relative;
      float: left;
      width: 100px;
      height: 100px;
      background: #666;
      margin: 0 15px 15px 0;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="container"&gt;
  
      &lt;div class="box1"&gt;&lt;/div&gt;
      &lt;div class="box3"&gt;&lt;/div&gt;
      &lt;div class="box1"&gt;&lt;/div&gt;
      &lt;div class="box2"&gt;&lt;/div&gt;
      &lt;div class="box3"&gt;&lt;/div&gt;
      &lt;div class="box2"&gt;&lt;/div&gt;
      &lt;div class="box3"&gt;&lt;/div&gt;
      &lt;div class="box2"&gt;&lt;/div&gt;
      &lt;div class="box1"&gt;&lt;/div&gt;
      &lt;div class="box1"&gt;&lt;/div&gt;
      &lt;div class="box3"&gt;&lt;/div&gt;
      &lt;div class="box2"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>