Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

enter image description here

But I want to make them like

enter image description here

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

like image 545
Muhammad Hassan Avatar asked Apr 22 '14 16:04

Muhammad Hassan


1 Answers

@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;   
}
like image 51
Upperstage Avatar answered Sep 28 '22 16:09

Upperstage