0

Probably this question was asked already but English is not my native language and I can't express my problem to search, also i search this in google about 1-2 hours. So please forgive me.

Here is my problem; enter image description here

As you can see the buttons are not horizontally aligned because of different name lengths.

Here is my code;

<hr>
      <div class="row column text-center">
         <h2>Most Viewed Products</h2>
         <hr>
      </div>
      <div class="row small-up-2 medium-up-3 large-up-6">
        <% @mosts.each do |most| %>
            <div class="column">
              <%= image_tag most.avatar.url(:large), {:class => "thumbnail"} %>
              <h8><%= link_to most.name, book_path(most) %></h8>
              <p><%= number_to_currency(most.cost, unit:"") %> &#x20BA;</p>
              <%= link_to 'Buy now!', book_path(most), {:class => 'button small expanded hollow', :style => 'float:left;'} %>
            </div>
        <% end %>
      </div>

I'm using RoR at the back-end as you can see. Also, I'm using Foundation 6 for the front-end.

Since the div size is not absolute, I can't use margin. I tried several things but nothing works.

Dani Vijay
  • 2,188
  • 2
  • 22
  • 37
Okan Binli
  • 21
  • 4

1 Answers1

0

you need a fixed height for the product title div. Since you are getting 1 or more liner for the product title.

or

you can make

.column {
 position: relative;
}

.button {
 position: absolute;
 bottom:0; //adjust to make the button place on the bottom of the card
}

The style above will let your button place on the bottom for every product card you have, just make sure your product title will not go 3-4 liner as it may overlap with your button

also try to make it a relative class so that this style will only apply to the cards

Drixson Oseña
  • 3,631
  • 3
  • 23
  • 36
  • Use the Equalizer plugin for Foundation to make all the column divs the same height as the tallest div in the row. Combine that with the CSS from this answer and you should be good to go. – Colin Marshall Dec 16 '15 at 23:13