Elements in horizontal blocks

HTML & CSS
1

Hello,

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

2

A solution for this was established in a SitePoint CSS Quiz not so long ago, which might be of interest:

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.

4

You’d have to use the css3 multi column module but [URL=“http://caniuse.com/multicolumn”]support is sparse and still only by vendor extension.

There is no other automatic way to do it.

5

So no automatic way to do it with css2?

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.

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.