How to display a list in two rows?

I have a list of items that I want to fit in a space that is constrained vertically:


Since I don't want the list to have more than a specific height, but I'm free to expan it horizontally, I want to divide the list into columns, like this:

One    Two     Three
Four   Five    Six

Or, alternatively (in my case order is not important)

One    Three   Five
Two    Four    Six

The css property column-count allows to break a list into columns, but it only accepts a fixed number of columns. I don't know the number of items I am going to have (it can go from 1 to more than 40), so if I set the number of columns to 3, any list with more than 6 items will be too high, and if there is only 4 items, then only the first column will have two items and it will look uneven.

So, ideally I would need a row-count property, but it doesn't exist. I guess I can do that in Javascript too but I'm looking for a CSS-only solution.

I tried something: float:left on every li puts the list in one row. To break it into two rows, I would need to not apply float:left to the N/2 element. I don't know how to do that.

I know also that I can do it by breaking it into multiple ul, each one with two li, and float:left them, but I would like to avoid messing the HTML for something entirely presentational.

Does someone has a solution for this problem?

Edit: I think I have not been clear in explaining my requirements. I want the list to be sorted into columns without knowing how many items I'm going to have, and so that I will always have two rows.

So for example with 7 items, I want to have:

One    Two     Three   Four
Five   Six     Seven

And with 3 items:

One    Two

Read more here:

Content Attribution

This content was originally published by Cyrille Ka at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: