Question

Could anyone please tell me what went wrong for below code?

I am trying to display 18 products, 3 in each row. i am new to this CSS, not sure what went wrong, could you please check from below code:

here is the output:

http://your-guru.com/store/c/clothes/

here is the code that displays the products:

<!-- Product List -->
<div class="pl">
  [product.each]
  <div class="t1 col3">
   <ul style="display: block;" class="display thumb_view category_list">
    <li>
     <div class="content_block">
      <a href="[product.url]" title="[product.name]"  class="product_thumb" style="width:190px; height:180px">
       <img src="http://templatic.com/demos/ecommerce/wp-content/themes/eCommerce_child/images/sale.png" alt="" class="sale_img">[product.image direct='1' tag='1' width='190' height='180']
      </a>
      <div class="content">
       <h3>
        <a href="[product.url]" title="View details of [product.name]">[product.name]</a>
       </h3>
       <p class="sale_price">
       <?php if ($product->saleprice > 0 &&  $product->saleprice < $product->price) { ?>
       <div class="prc">
        <small>
         <span style="text-decoration: line-through; color:blue;">[product.currency mode='sign'][product.price]</span>
         &nbsp&nbsp
         <span style="font-weight: bold; color:red;">[product.currency mode='sign'][product.saleprice]</span>
        </small>
       </div>
       <?php } else { ?>
       <div class="prc">
        <small>
         <span style="font-weight: bold; color:blue;">[product.currency mode='sign'][product.price]</span>
        </small>
       </div>    
       <?php } ?>
       </p>
      </div>
     </div>  <!-- content block #end --> 
    </li>
   </ul>
  </div>  <!-- t1 col3 #end --> 
  [/product.each]
  <div class="clearingdiv"></div>
 </div> <!-- /Product List -->

Please tell me what went wrong?

Answer 1

At first, the HTML-MarkUp is a bit bloated, difficult to maintain. Second, you should not use css inline.

Your problem is about floating and no equal heights of your products. When you give the following selector #view .col3 a height like 370px you can see that the products are floating nicely.
So, you have to choose how you set your height.

• static height with enough space
• stripping the product-titles
• setting the height of .col3 via javaScript
• …