Elements with float: left directly below the above on new row

Question

I'm trying to fill my screen with boxes so I've floated them left.

My problem is, that the boxes have different heights. So the when a new line begin, the top Position of the first Div is equal to the bottom position of the tallest.

Have anyone an idea, how i could fix that problem

It's difficult to explain, so I've made a screenshot.

http://s7.directupload.net/images/140506/rdzp72sh.jpg

greez!

Answer 1

You can try a jquery solution. Only from Css you can not solve this. A not paid version for "arrange" divs in optimal vertical position with different height in the layout is http://masonry.desandro.com/.

Answer 2

Take a look at this, it might help you.

http://demosthenes.info/blog/825/Pinterest-Style-Column-Layout-In-Pure-CSS