How to horizontally align 'add to cart' buttons

I am trying to align my 'add to cart' buttons to that they ar horizontally aligned at the bottom of the listing regardless of how much text is above it.

So far I have some aligned but there is a few that won't!!!

Does anyone know how to achieve this?
Who is Participating?
Chris StanyonConnect With a Mentor Commented:
OK. You'll need to position your buttons absolutely, but to get them all to line up, you need to make sure all your LIs have an equal height. Something like this might do the trick:

<!--make sure all the items (LIs) have an equal height-->
.products-grid .item { position:relative; height: 400px; }

<!--now align the buttons 10px from the bottom of each LI-->
.products-grid .item button { position:absolute; bottom: 10px; }

Open in new window

Obviously, you'll need to adjust the measurements accordingly.
Chris StanyonCommented:
It's impossible to tell without seeing your page!
rafique12Author Commented:
The only way as an alternative would be to send screenshot as its on my localhost MAMP...
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Chris StanyonCommented:
Still won't really be able to tell from a screen shot, because it depends wholly on the html code and the css styling. Without seeing that we'd be just guessing at a solution! If this is a custom theme using custom layouts then the possibilities are endless.

Post a screenshot anyway and I might be able to have an educated guess.
rafique12Author Commented:
This is the CSS
.products-grid { position:relative; font-family:'Source Sans Pro', sans-serif;}
.products-grid.last { border-bottom:0; }
ul.products-grid { margin: 18px -20px; }
.products-grid li.item { display: inline-block; vertical-align: top; width:157px; margin-left: 20px; padding-bottom:18px;  }
.products-grid li.last { margin-right: 0; }
.products-grid .product-image { display: block; margin-bottom: 2px; }
.products-grid .product-image img { display:block; height: auto; max-width: 100%; width: auto; /* Prevents scaling problem in IE8; */ margin:0 0; }
.products-grid .product-image img:hover { opacity: 0.9; }
.products-grid.first .product-image { border-top:0; }
.products-grid li.last .product-image { border-right:0; }
.products-grid .product-name { font-size:12px; line-height:1.5em; font-family: 'Source sans pro' margin: 0; height: 100px; }
.products-grid .product-name a { color:#2166A2; letter-spacing: 0.1em; text-decoration:underline;}
.products-grid .product-name a:hover { text-decoration:underline; }
.products-grid .price-box { margin:9px 0; }
.products-grid .availability { line-height:21px; }
.products-grid .actions { bottom: 0; }
.col2-left-layout .products-grid,
.col2-right-layout .products-grid {  }
.col1-layout .products-grid,
.page-empty .products-grid { }

Open in new window

This code displays the products in a grid.
    $_helper = $this->helper('catalog/output');
<?php if(!$_productCollection->count()): ?>
<p class="note-msg"><?php echo $this->__('There are no products matching the selection.') ?></p>
<?php else: ?>
<div class="category-products">
     <?php // Grid Mode ?>
    <?php $_collectionSize = $_productCollection->count() ?>
    <?php $_columnCount = $this->getColumnCount(); ?>
		<?php $_iterator = 0; ?>
        <ul class="products-grid">    
		<?php $i=0; foreach ($_productCollection as $_product): ?>
            <li class="item">
                <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(252); ?>" width="252" height="252" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>
                <h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></a></h2>
                <?php echo $this->getPriceHtml($_product, true) ?>
                <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button-orange" onclick="setLocation('<?php echo $this->getProductUrl($_product) ?>')"><span><span><?php echo $this->__('Buy it now!') ?></span></span></button>
		<?php endforeach ?>
        <script type="text/javascript">decorateGeneric($$('ul.products-grid'), ['odd','even','first','last'])</script>
<?php endif; ?>

Open in new window

This is the homepage which displays product categories using tabsThis the main catalog page which displays products for the category
I would give the class="item"> a height that can handle the entire thing and then give the button the position bottom:0px;
rafique12Author Commented:

With a few minor tweaks to the thumbnail sizes I was able to get everything aligned with your solution.

Thankyou to both of you for your contributions
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.