How to display data in two columns in Rails

Question

I'm new to Ruby on Rails. How can I display products in two columns?

When I write the following, the right column will display the same products, but I want to display some in the left and some in the right columns.

#main_container  
.left_col

%div{"data-hook" => "___homepage_featured_products"}

%h3

   Featured Activities
 - @featured.each do |pr|
   - @product = pr
   %a.box{:href=>url_for(@product), :title=>"#{@product.name} | #{@product.location}"}
     - if @product.images[0]
       .img{:style=>"background-image: url('#{@product.images[0].attachment.url(:original)}')"}
       .details
         %h3
           = @product.name.truncate 20
         %p.infos
           = image_tag @product.activity_type.icon, :class=>"pictogram" rescue ''
           %span= @product.activity_type.name.titleize rescue ''
           \/
           %span.price= number_to_currency @product.price rescue ''
           \/
           = @product.location
           \/
           = @product.level
         %p
           = @product.description.truncate(120) rescue ''

.right_col

Please read the formatting help. You need to indent your code by 4 spaces, or select it and press Ctrl-K. — slhck
– slhck, Commented Feb 9, 2013 at 10:33

mind.blank · Accepted Answer · 2013-02-09 10:02:52Z

1

You could put each product into its own div, and then use CSS to float them to the left so that a maximum of 2 boxes will appear next to each other horizontally. This will give the effect of a 2 column layout. As an example:

#main_container { width: 900px; }
.featured_product { width: 450px; float: left; }

Add padding etc as needed.

Alternatively you could split the array after you retrieve it from the database and run the code twice, once in the left column and once in the right:

@left, @right = @featured.in_groups_of((@featured.count / 2.0).ceil, false)

edited Feb 9, 2013 at 10:02

answered Feb 9, 2013 at 9:49

mind.blank

4,8903 gold badges25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display data in two columns in Rails

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related