title: Floating divs being pushed down
body: <p>I'm so unsure of why this is happening, I'm having a lot of trouble finding a solution, so here it is plain and simple</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="thing"&gt;&lt;/div&gt;
  &lt;div id="big" class="thing"&gt;&lt;/div&gt;
  &lt;div class="thing"&gt;&lt;/div&gt;
  &lt;div class="thing"&gt;&lt;/div&gt;
  &lt;div class="thing"&gt;&lt;/div&gt;
  &lt;div id="big" class="thing"&gt;&lt;/div&gt;
  &lt;div class="thing"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.thing {
      background-color: blue;
      height: 100px;
      width: 80px;
      margin: 20px 0 0 20px;
      display: inline-block;
      float: left;
  }
  
  #big {
      height: 140px;
  }
  </code></pre>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/sdmq155g/1/" rel="nofollow">https://jsfiddle.net/sdmq155g/1/</a></p>
  
  <p>The blue divs on the bottom shouldn't be pushed down unless there is a big div above them. They should all nestle right up underneath the div above them. But for some reason, all their positions are based off of the bigger divs in the top row, even though they're not all directly below one.</p>