CSS Layout full of random sized divs

Question

I'm trying to create a layout that is backward from what I usually do. I have hundreds of randomly sized divs that I want to fill in as much of the page as possible. As a quick hack, it might look something like this:

|--------||-------------------||----||-----------|
|        ||        2          ||  3 ||     4     |
|   1    ||-------------------||    ||-----------|
|        ||-----------------|  |----|
|        ||                 ||---------|
|--------||        5        ||         |
|--------||                 ||    6    |
|    7   ||-----------------||         |
|        |                   |---------|
|--------|

I've been playing with float lefts, but they don't move upward to fill the gaps. How can this be done?

Thanks guys!

Answer 1

This kind of question was asked yesterday too. The solution was to use a JQuery plugin: Masonry.

http://stackoverflow.com/questions/3379994/any-ideas-on-how-i-could-implement-a-grid-view-in-css-css

Answer 2

Use the jQuery Masonry plugin or:

You will have to create a column/grid-based system. For example, div 1 and 7 go in their own parent div, div 2 and 5 go in their own parent div, 3 and 6 go in their own parent and so on.

You may be interested in using some of the famous grid systems:

• 45+ CSS Grid Systems
• 4 CSS Grid Systems and Why

You can also create the via:

• Grid System Generator