I am building an online store using Ruby on Rails 3.2 that includes a 'do' loop to pull product details from the DB and wrap the results in a Div. problem is when multiple products are populated the Div wrapping each product info are not horizontally aligned. I currently have the Div set up to float-left this positions them horizontally next to each other but they are not lined up properly (the each div to the right is positioned a little lower than the one that precedes it.
I've included the html and CSS code below. any assistance on this would be much appreciated
HTML Code
<% @products.each do |product| %>
<div class="Primary span 3">
<p id="offer-title"> <%= product.title %> </p>
<%= image_tag(product.image_url, :alt =>product.title, :width =>90, :height=>180)%>
<hr />
<div id="promo-header">
<dl id="tier">
<dt >Tier</dt>
<dd class="tier-details tier1-style">1</dd>
<dd class="tier-details tier2-style">2</dd>
<dd class="tier-details tier3-style">3</dd>
</dl>
<dl id="save">
<dt >Save</dt>
<dd class="tier-details tier1-style">$0.50</dd>
<dd class="tier-details tier2-style">$1.00</dd>
<dd class="tier-details tier3-style">$1.50</dd>
</dl>
<dl id="units">
<dt >Units</dt>
<dd class="tier-details tier1-style">1000</dd>
<dd class="tier-details tier2-style">3000</dd>
<dd class="tier-details tier3-style">5000</dd>
</dl>
</div>
CSS Code
.Primary {
padding-right: 10px;
float:left;
position:relative; left:185px;
margin-right: 20px;
width: 265px;
display: block;
height: 320px;
background: white;
border: 1px solid;
}
I have been struggling with this for 3 days now and would appreciate any assistance.
it was a simple mistake text was overflowing from a paragraph outside the div and pushing the boxes down. once i corrected that they all lined up perfectly.