This may not be the exact solution for everybody but I find that (quite literally) thinking outside the box works for many cases: in stead of displaying the the boxes from left to right, in many cases you can fill the left column first, than go to the middle, fill that with boxes and finally fill the right column with boxes.
Your image would then be:
:
If you are using a scripting language like php you can also fill the columns from left to right by adding a new box to it and outputting when all columns are filled. eg (untested php code):
$col1 = '<div class="col1"> <div>box1</div>';
$col2 = '<div class="col2"> <div>box2</div>';
$col3 = '<div class="col3"> <div>box3</div>';
$col1 .= '<div>box4</div> </div>'; //last </div> closes the col1 div
$col2 .= '<div>box5</div> </div>';
$col3 .= '<div>box6</div> </div>';
echo $col1.$col2.$col3;
$col1, $col2 and $col3 can have float:left and width: 33%, set the boxes inside the div to full width and no float.
Obviously if you are using javascript / jquery to load the boxes dynamically you are better of styling them this way as well, as explained in other answers to this thread.
