CSS different height div elements causing grid spa

Question

This picture describes by problem better than I can put it into words. How can I get the grid to be tight without any gaps. I need a CSS only solution if there is one. I would rather not change the html if at all possible. There is a demo set up here if you would like to try out some ideas. Variable heights must be allowed also so we can't set all the elements to the same height. Any Ideas?

DEMO

Answer 1

You can also do this by alternating your floats. I changed some of the box css, adding box-sizing and removing the inline-block

http://jsfiddle.net/x666E/

.box{background-color:white;
  border:1px solid black;
  margin: 0;
  width:50%;
  display:block;
  float:left;
  box-sizing: border-box;
}
.box:nth-child(2n + 0) { float: right; }