css3 - How to horizontally align Divs generated from rails loop -
i building online store using ruby on rails 3.2 includes 'do' loop pull product details db , wrap results in div. problem when multiple products populated div wrapping each product info not horizontally aligned. have div set float-left positions them horizontally next each other not lined (the each div right positioned little lower 1 precedes it.
i've included html , css code below. assistance on appreciated
html code
<% @products.each |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 3 days , appreciate assistance.
it simple mistake text overflowing paragraph outside div , pushing boxes down. once corrected lined perfectly.
Comments
Post a Comment