Dynamic float layout with CSS

Let me try and explain what I want to achieve. I want X boxes with a specific width (250 px) set but dynamic height to be placed in the body. But I want them to be as compact as possible, no unnecessary empty space between them.

Now If all boxes had same width and height, this would be easy. I could for example just put float:left; on them. But the when the boxes height is dynamic, and all boxes have random height I end up with spaces between the boxes.

Let me show two examples:

This is what I want:

This is what I end up with:

This is my CSS:

<style type="text/css">
 <!--
 body {
     background:#CCCCCC;
 }
 .flowBox {
     background:#FFFFFF;
     margin:10px;
     float:left;
     padding:10px;
     width:250px;
     border:#999999 1px solid;
 }
 .clear {
     clear:both;
 }
 -->
 </style>
 

HTML example for a box:

<div class="flowBox">
    <h1>Header 0</h1>
    Erat volutpat. Sed rutr...
 </div>
 

Full source code: http://pastebin.com/UL1Nqyvm

Is there a way to achieve this with CSS? Thanks for any help or directions!

---