How to swim with different div sizes to the left in perfect mesh style?

Question

I have a problem here. I have many DIVs with the same width, but their heights are different and float to the left, but they do not appear as I want. His appearance as

But I want them to look like

So tell me how can I do this using Pure HTML-CSS, No JavaScript or JQuery etc.

Answer 1

@Tom Chew-head Millard is correct; this is a pure CSS solution. My experience = easy to use.

http://css-tricks.com/snippets/css/multiple-columns/

== EDIT AFTER READ COMMENT MH

http://jsfiddle.net/qZ3N4/1/

#DEMO_ID { -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; } #DEMO_ID div { column-break-before: always; }