Float divs with variable heights (arrange)

Question

Hello!

I'm having a simple problem concerning the arrangement of floating divs with variables heights.

The goal:

http://i.imgur.com/yngM5.jpg

The result:

• see below, can't post more than one link -

I just have div containers with css float: left; and no height defined. The first red circle indicated that my technique fails, although the second one proves me wrong by showing it IS working. Unfortunately, the last (not on screenshots) just starts floating after the height of the previous one (so there's a whole empty space on the left).

How should i solve this?

Thanks!

Answer 1

I don't think that this is doable a 100% with "just" css, but jquery-masonry should do the trick [ http://desandro.com/resources/jquery-masonry/ ]. Well, but i hope somebody proofs me wrong :)

Answer 2

You have two columns. Then code it accordingly:

<div class="column">
    contents of first column
</div>
<div class="column">
    contents of second column
</div>

(you set float:left on the column DIVs)