CODEWITHSUNDEEP
cssruby-on-rails-3.1
Dev R
Dev R

Reputation: 1902

Displaying List elements in multiple columns- CSS

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:

List_Required

However I am currently getting it like this

List_Actual

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

Upvotes: 3

Views: 1751

Answers (2)

KVenkat
KVenkat

Reputation: 1

Try to use the below CSS only to your div,

column-width: 300px; column-gap: 20px;

It would align to multiple columns if you are resizing the browser also.

Upvotes: 0

Stephan Muller
Stephan Muller

Reputation: 27630

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.

Upvotes: 5

Related Questions