title: How can I stagger these HTML elements vertically?
body: <p>I want to make a grid have certain columns staggered, like this:</p>
  
  <p><img src="https://i.stack.imgur.com/YcuHc.png" alt="staggered columns"></p>
  
  <p>Currently I can only get the 4th element to line up so it's below 2 (with a <code>clear: left;</code>). <strong><a href="http://jsfiddle.net/LeonardChallis/s9KDC/1/" rel="nofollow noreferrer">This can be seen in a fiddle</a></strong>.</p>
  
  <p>I'm not sure if this is possible without absolute positioning or at best relative position to the <code>#wrapper</code> element. I'm not totally against ideas that need <code>javascript</code>, because in fact the above jsFiddle is a very simplified version of a layout that relies on <code>jQuery</code> to display properly.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;section&gt;
          &lt;p&gt;1&lt;/p&gt;
      &lt;/section&gt;
  
      &lt;section id="staggered"&gt;
          &lt;p&gt;2&lt;/p&gt;
      &lt;/section&gt;
  
      &lt;section&gt;
          &lt;p&gt;3&lt;/p&gt;
      &lt;/section&gt;
  
      &lt;section id="new-row"&gt;
          &lt;p&gt;4&lt;/p&gt;
      &lt;/section&gt;
  
      &lt;section&gt;
          &lt;p&gt;5&lt;/p&gt;
      &lt;/section&gt;
  
      &lt;section&gt;
          &lt;p&gt;6&lt;/p&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>section {
      width: 100px;
      height: 50px;
      margin: 10px;
      background: #FFCC66;
      float: left;
  }
  
  section#staggered {
      margin-top: 35px;
  }
  
  section#new-row {
      clear: left;
  }
  
  #wrapper {
      width: 360px;
  }
  </code></pre>