Dirk Bergmann

Developer, panographer. Does consultancy work from own company. Lives in Chiang Mai, Thailand.

Twitter

Chiang Mai

Hua Hin

Thailand Hotels

ListVote - List. Vote. Learn.

Partnerseek - Find Partners

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:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

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:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

However, the progression and count of the list is horizontal while the user expects it vertical, with his view naturally moving down and then to the next column. There is a plethora of css artistry involved in getting this to work cleanly and with just CSS and sometimes JavaScript, see this article for a treat(ment).

In Rails of course you can easily create multiple lists with the in_groups_of method and float them left to line up horizontally:

<% ar = (1..12).to_a; number_of_columns = 3 %>


<% ar.in_groups_of(ar.size/number_of_columns) do |column| %>

    <% for item in column %>

  • <%= item  %>

  • <% end %>

    <% end %>

    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.