• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2178
  • Last Modified:

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?
  • 3
  • 3
1 Solution
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...
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.
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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
Chris StanyonCommented:
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.
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now