Stack divs on top of each other in 2 rows without whitespace

Question

I really need your help on this one:

Right now I have divs just on top of each other, filled dynamically with diverse contents so the heights are changing.

What I want to do now is to place them in 2 rows. With a fixed width and "float:left" this kinda works already.

My english is not the very best so pls take a look at my example picture first:

As you can see there is this whitespace because of the third div which doesn't start right beneath the first div because of div number 2 which CAN BE higher as the first div.

I now wonder if there is a possibility to automatically position those divs higher so that there is no whitespace (they always should start right beneath the picture which is above wouth the whitespace, left or right).

LIKE THIS:

I hope you kinda understand what I mean :D Thanks in advance for replys!

EDIT: Code-Example:

<div id="content">
<div class="xyz">BLABLA</div>
<div class="xyz">BLABLA<br>morebla!<br>EVEN MORE BLA</div>
<div class="xyz">BLABLA</div>
</div>
<style>
#content {
width: 648px;
}
.xyz {
width: 303px;
float: left;
border:1px solid black;
}
</style>

Remeber, heights are always different!

Answer 1

jQuery 砌体使您的生活变得更加轻松..不要重新发明轮子，尤其是当您面对经典的CSS问题时。

Answer 2

this will do it...

   <div id="content">
    <div class="column1" id="left">
     <div id="div1">...</div>
     <div id="div3">...</div>
    </div>
    <div class="column2" id="left">
     <div id="div2">...</div>
     <div id="div4">...</div>
    </div>
   </div>

Then just style column2 styles by defining widht values in your css.

Thanks,

@leo.