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

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