<ul> overflow to next line in XHTML and CSS

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

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 2

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 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]