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

Popular posts from this blog

php - Calling a template part from a post -

Firefox SVG shape not printing when it has stroke -

How to mention the localhost in android -