Displaying List elements in multiple columns- CSS

Question

I am looping through countries to get the list of the countries in alphabetical order. The desired form of display is as shown in the image below:

However I am currently getting it like this

I am using unordered list to achieve the desired result.

Here is the code :-

Code in the view :-

<% User.find(:all, :order => "name").group_by(&:initial).each do |initial, users| %>
<table>
 <ul>   
  <li><%= content_tag(:h3, initial)%> </li>
 </ul>

  <% users.each do |user|%>
 <ul>
   <li> <%= link_to(user.name, user)%> </li>
 </ul>
  <% end %>

  </table>
<% end %>

CSS:-

ul {

    list-style: none;

}

Could anyone please guide me?

Thanks

Answer 1

Assuming that each letter + it's children is a li, and the ol is the surrounding tag, you could use something like:

ol {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}

Example: http://jsfiddle.net/rDQe5/1/

Mind you though that some browsers (esp. older IE versions) don't support this.

update

After you updated your question with code, some things:

1. Don't use a table
2. In this case, apply the column-count to the surrounding element (so now to the table, but it's better if you change it to a div.
3. It's even more betterer to make the wrapper an ordered list (ol), each letter is a li, and then for each country per letter another list (but this time unordered). I've updated my example to reflect that better.