l2u — 2011-12-01T04:30:05-05:00 — #1
I have X number of elements (unordered list - ul) in a div with a fixed height.
I've been wondering how (if) it's possible to position elements in vertical order like so:
-element 1 -element 4 -element 7
-element 2 -element 5 -element 8
-element 3 -element 6
Is it possible to achieve that without setting clear on last parameter in the block / row?
Currently I have set float: left and fixed width on li attributes.
Thanks for help
ralphm — 2011-12-01T05:51:48-05:00 — #2
l2u — 2011-12-01T09:51:44-05:00 — #3
This is similar but not what I want to do. The difference is that I want elements to move in the next column when the current column is full, depending on the height or even better - if I could limit limit the number of elements in a column with css.
paulob — 2011-12-01T11:09:24-05:00 — #4
You'd have to use the [css3 multi column module but [URL="http://caniuse.com/multicolumn"]support is sparse](http://www.css3.info/preview/multi-column-layout/) and still only by vendor extension.
There is no other automatic way to do it.
l2u — 2011-12-01T12:18:18-05:00 — #5
So no automatic way to do it with css2?
paulob — 2011-12-01T16:09:37-05:00 — #6
Unfortunately there doesn't seem to be a way to do what you want and the quiz Ralph linked to was the closest we got but is not much use in the real world as it's a little contrived.
paulpov — 2011-12-06T18:43:01-05:00 — #7
About automatic ways - I know it's not the most efficient way, but I would use a php script for that - so that it would make html on the go. I would devide the holder into three columns and php would know if one of them is already full and it should start a new one.