HTML List Items in Two or More Columns without and with Rails
Table avoidance is raging on in contemporary HTML design and nobody wan’t to be caught with an unnecessary table on their pages. This may go to far or not, but to display data in multiple columns without resorting to a table you can proceed like this:
Then make the ul 100% wide and the list items (li) 50% or 33% or 25% or whatever and float them left (fixed values in pixels or ems work as well):
Here’s the result:
<% ar = (1..12).to_a; number_of_columns = 3 %><% ar.in_groups_of(ar.size/number_of_columns) do |column| %>
<% for item in column %>
If you need an ordered list (ol) you could set the start attribute programmatically with each new list, but then again the start attribute is deprecated and your mileage may vary. The quoted article has a complex but workable CSS solution. Hope it helps.
Posted: 19 January 2009