How to layout product list with divs instead of tables?

css product layout

[jamesw]

I'm really stuck as I need a table layout but I don't want to use tables because of the SEO implications and the inflexibility and lack of fluidity.

So I have a list of products each with an image a name a description and a price live side by side and drop down underneath each other as the browser width shrinks or font size increases etc...

I have each product wrapped up in it's own div floated left and positioned relative with a % width so that different sized screens will show all the products

The css is as follows

#store .product-store {
 width: 20%;
 float: left;
 padding: 1%;
 margin: 1%;
 /* overflow: hidden;*/
 min-width:100px;
 position: relative;
}
#store .product-store .image-box,
 #store .product-store .name-box,
 #store .product-store .description-box,
 #store .product-store .price-box{
 float: left;
 width: 100%;
 position: relative;
}

The Rails code that generates this

<%unless @products.blank?%>
 <% @products.each do ¦ product¦ %>
  <div class="product-store">
   <div class="image-box">
     <%= render_image_tag(product.primary_image, 'small') %>
   </div>
   <div class="name-box">
    <h3><%=product.name%></h3>
   </div>
   <div class="description-box">
    <p>
     <%= truncated_description product.description %>
    </p>
   </div>
   <div class="price-box">
    <span class="price">
     <%= number_to_currency(product.price, :unit => "£") %>
    </span>
    <% form_remote_tag :url => { :action => :add_to_cart, :id => product } do %>
     <%= submit_tag "Add to Cart" %>
    <% end %>
   </div>
  </div>
 <%end%>
<%end%>

The html that is generated for two made up products

  <div class="product-store">
   <div class="image-box">
     
 <img alt="3afd_1" src="another-image.jpg" />
   </div>
   <div class="name-box">
    <h3>ff</h3>
   </div>
   <div class="description-box">
    <p>
     1
    </p>
   </div>
   <div class="price-box">
    <span class="price">
     £1.00
    </span>
    <form action=
    </form>
   </div>
  </div>
 
  <div class="product-store">
   <div class="image-box">
     
 <img alt="5656_1" src="an-image.jpg" />
   </div>
   <div class="name-box">
    <h3>ggffggff</h3>
   </div>
   <div class="description-box">
    <p>
     
fred
fred
fred
fred
fred
fred
fred
fred
fred
f...
    </p>
   </div>
   <div class="price-box">
    <span class="price">
     £1.00
    </span>
    <form action=
    </form>
   </div>
  </div>

Now this is all good except that nothing lines up with it's neighbour

I need to find a way to make sure that the height of all the .description-box divs are the same as the height of the largest description and so on for the other .image-box, .name-box, and .price-box divs so that if a larger description or a missing image is added I will still have the price line at the same level as the product next to it and all should line up nicely.

In the above example the the price for the product that has the really short description sits way above the height of the product that sits next to it with a descriptiobn of lots of freds repeated.

I'm looking for a way to add a row concept to the above I guess.

This surely must have been done many times but the only solutions I'm able to find either use images to fix the divs in place (which is totally rubbish) or use tables which is equally rubbish.

any ideas pointers or examples would be greatly appreciated

Cheers

[swa66]

If I get it right: you have a number of floated boxes with you want vertical control without making a static height and the control you seek if to have each "row" of floated boxes to have identical height and the height of he one withthe tallest content ?

Javascript is going to be your friend. CSS has no concept of finding the tallest element out of a sit, nor of referencing siblings' size.