Floating divs being pushed down - css

Question

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
HTML
<div class="thing"></div>
<div id="big" class="thing"></div>
<div class="thing"></div>
<div class="thing"></div>
<div class="thing"></div>
<div id="big" class="thing"></div>
<div class="thing"></div>
CSS
.thing {
background-color: blue;
height: 100px;
width: 80px;
margin: 20px 0 0 20px;
display: inline-block;
float: left;
}
#big {
height: 140px;
}
JSFiddle: https://jsfiddle.net/sdmq155g/1/
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.

Answer 1

The box model that all browsers implement behaves in exactly the way your jsFiddle demonstrates. The blue divs won't nestle up underneath each other, but in fact they will start on the next line based on the tallest item on the row above.
You could overcome this by placing the divs you'd like to stack in a column, then floating these divs.
Example here:
.col {
float: left;
width: 80px;
}
.thing {
background-color: blue;
border: solid 1px red;
height: 100px;
}
#big {
height: 140px;
}
<div class="col">
<div class="thing"></div>
<div id="big" class="thing"></div>
</div>
<div class="col">
<div id="big" class="thing"></div>
<div class="thing"></div>
</div>
<div class="col">
<div class="thing"></div>
<div id="big" class="thing"></div>
</div>
<div class="col">
<div class="thing"></div>
<div id="big" class="thing"></div>
</div>
<div class="col">
<div class="thing"></div>
<div id="big" class="thing"></div>
</div>