<ul> overflow to next line in XHTML and CSS - html

Question

I have a list of items (<ul> containing <li>'s) which I want to limit by height.
Let's say I have the following code:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
This will display as such:
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
I would like it to display like this:
Item 1 Item 4
Item 2 Item 5
Item 3 Item 6
Is there a way to achieve this without tables and without using different <ul> tags?
I'm looking for something like this - <ul limit="3"> but I don't mind limiting it by height (i.e. <ul limit="60px">)
The reason I want this functionality is that I am generating the <li> tags dynamically.
I'm using Ruby on Rails - if this isn't possible with simply XHTML and CSS - is there a way to achieve this is Rails without literring the view?

Answer 1

Is the ordering a hard requirement? If the width of the items is a known, you can do this:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
CSS:
ul { width: 100px; }
li { width: 50px; display: block; float: left; }
That will render like this:
Item 1 Item 2
Item 3 Item 4
Item 5 Item 6

Answer 2

I can answer for the XHTML/CSS part: no, sadly, not yet. In the future, we will have CSS columns. Breaking it up into different lists is how I'm aware of this typically being done now.
Update There is this: http://www.alistapart.com/articles/multicolumnlists/ which gives a number of ways of doing it, but I'm not sold on them, especially for programmed output.

Answer 3

To get your array sorted in the correct order to use the floating solution:
a = [1,2,3,4,5,6,7,8]
a.partition{|el|el % 2 == 1}.flatten
a => [1,3,5,7,2,4,6,8]