How To Float Different Size DIV To Left In Perfect Grid Style?

Question

Here I have a problem. I have many DIVs having same width but their heights are different and are float to left but they are not appearing as I want. Its appearing as

But I want to make them 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 purely CSS solution. My experience = easy to use.

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

== EDIT AFTER READING MH COMMENTS

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;   
}