One of the ways to solve this issue is using a mutiple column layout. This way you can split your content in more than one column keeping a different height for each one of your boxes.
.column {
display : inline-block;
margin: 0.7em;
vertical-align: top;
width: 40%;
}
.box {
border: 1px solid red;
background: #eee;
display : inline-block;
margin: 0.7em;
vertical-align: top;
width: 100%;
}
As you can see in the JSFiddle.
There are some cool examples and guides of how use multiple columns:
- http://css.dzone.com/articles/implementing-card-ui-pattern
- http://portfolio.planetjon.ca/2012/12/31/how-to-make-a-flowing-css-gallery-layout/
Hope that helps you.