Product list is not aligned

[Haniver]

Hello.

The product blocks in the product list of my site are different in height: if the description and short description of the product are lengthy, the blocks are higher, and shorter otherwise. I want them to be equal, so everything looks aligned.

I came across this: http://www.digital-zest.com/blog/web-design-development-blog/setting-product-blocks-with-equal-heigh...

Which advises to change the file list.phtml and use some javascript to make all divs the same height, but that way the content stays at the top of the block. and I also need the content to be evenly spread horizontally through the div, so it looks as if every block was a square of the same size.

How do I achieve this?

Thank you

[OST Agency]

To change the column count from 4 to 3 in the category page, add the below code to your app/design/frontend/your_package/your_theme/layout/local.xml

<catalog_category_default>
    <reference name="product_list">
        <action method="setColumnCount"><count>3</count></action>
    </reference>
</catalog_category_default>
<catalog_category_layered>
    <reference name="product_list">
        <action method="setColumnCount"><count>3</count></action>
    </reference>
</catalog_category_layered>

Now to align the list items 3 in a row for all the screens properly use the below css

.products-grid li.item{
    width: 225px;
    float:left; //Remove this line
    display:inline; //Remove this line
    display:inline-block; //add this line
    margin-right:1px; // remove this line
}

This will set 3 items in a row for all the screens and since the display is set to inline-block, margin will be added automatically to each item to position it appropriately in a row.

Try this out