Css "vertical" Grid

Question

I want to create a resizable grid, filled with draggable and sortable icons (similar like in a desktop). The problem is that with css "float: left", I get a "horizontal" filling grid (from left to right, then top to bottom), what I want is from top-to-bottom, then left-to-right (also like desktop)

Current State:

[ icon1 ][ icon2 ][ icon3 ]
[ icon4 ][ icon5 ][ empty ]
[ empty ][ empty ][ empty ]

Desired State:

[ icon1 ][ icon4 ][ empty ]
[ icon2 ][ icon5 ][ empty ]
[ icon3 ][ empty ][ empty ]

Any sugestions on html markup or css rules?

right now i have a js script that gets the height of the container div and if it is smaller than the height of the list of icons, it creates another ul and populates it with the one hidden, but i don't think it is the best solution.

Thanks

Aditional Notes: I'm using jQuery and jQuery UI, the proyect is for Google Chrome only so I'm not worried much about browser compatibility, also, I don't have troubles with HTML5 or CSS3 solutions that are browser especific. At last, the icons are loaded dinamicaly and the cointainer can be resizable so I don't think that the icons could be absolute positioned

*Sory for my English*

Answer 1

Use a multi column list. Here is an example that creates a multi column list with jquery. Once you have it in multiple columns you should be able to do what you need with it. I would suggest applying a class to each column so you can resize that column rather than all of the li, and you can set the li to be a container for the drag and drop section.

http://jsbin.com/ifaca/

Answer 2

This could be possible using column-width and column-gap in CSS3