Glue divs next to each other

Glue divs next to each other

Is there anyway to make divs sort of blue to each other no matter the size
that they have?
http://imgur.com/mxODPnk
I've tried searching and the float:left works but for example in the image
above the yellow div will make the brown and green not appear in the
location like in the image, but below the line of the yellow.
I've tried using display: inline-block but it still doesn't work.
.glue-div{
margin-left: 10px;
border: 1px solid black;
color: orange;
float: left;
background: #303030;
}
here is a jfiddle that represents what my question is:
http://jsfiddle.net/sezcY/
Simply look at div six positioning. It should be below three and it has a
huge margin.
I guess I'd have to rearrange the order of the divs through JQuery?