multiple float lefts will not float under each leaving ugly white space

Question

When using the following html example:

<div style="width:50%;float:left;">
    test1<br/>
    test1<br/>
    test1<br/>      
</div>
<div style="width:50%;float:left">
    test2<br/>
    test2<br/>
    test2<br/>
    test2<br/>
    test2<br/>
    test2<br/>      
</div>
<div style="width:50%;float:left">
    test3<br/>
    test3<br/>
    test3<br/>
    test3<br/>
    test3<br/>
    test3<br/>      
</div>

There is an ugly gap between test1 and test3, I would expect the test3 div to follow immediately under test1 instead there is a space until test2 finishes. This same problem can be seen in firefox too.

Answer 1

When a float element is flowed to the next line, it will appear underneath the preceding float element that caused it to wrap. If this is undesirable behavior, what you may need to do is change the hierarchy - have a container for the left column (50%) and another container for the right column (the other 50%); then a list of elements within each of these:

(psuedo-code):
<left 50%>
 <test1/>
 <test3/>
</left>
<right 50%>
 <test2/>
</right>

Answer 2

You cannot fix that nicely with pure HTML/CSS. JavaScript can however do that. For jQuery there's a Masonry plugin which does exactly that.

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

At its homepage you can find a live demo and several examples in the wild.