CSS Different Height Div Elements Causing Grid Spacing

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 rath

Solution 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; }