How to horizontally align 'add to cart' buttons

Posted on 2012-09-04
Last Modified: 2012-09-04
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?
Question by:rafique12
    LVL 42

    Expert Comment

    by:Chris Stanyon
    It's impossible to tell without seeing your page!

    Author Comment

    The only way as an alternative would be to send screenshot as its on my localhost MAMP...
    LVL 42

    Expert Comment

    by:Chris Stanyon
    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.

    Author Comment

    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
    LVL 42

    Accepted Solution

    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.
    LVL 7

    Expert Comment

    I would give the class="item"> a height that can handle the entire thing and then give the button the position bottom:0px;

    Author Closing Comment


    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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Why You Should Analyze Threat Actor TTPs

    After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    9 Experts available now in Live!

    Get 1:1 Help Now