Question

I have my markup something like this.

  <ul class="products">
    <li class="product pro first">
      <a href="#">
          <span class="onsale">Sale!</span>
        <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="http://web-vassets.ea.com/Assets/Resources/Image/FeaturedGame/battlefield-bad-company-2-thumb.png?cb=1340391602">
        <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem</h3>
          <span class="price"><span class="strike-through"><span class="striked-text"><span class="amount">$&nbsp;67.00</span></span></span> <ins><span class="amount">$&nbsp;23.00</span></ins></span>
      </a>
        <a class="add_to_cart_button button product_type_simple" data-product_id="185" rel="nofollow" href="#">Add to cart</a>
    </li>

    <li class="product pro first">
      <a href="#">
          <span class="onsale">Sale!</span>
        <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="http://web-vassets.ea.com/Assets/Resources/Image/FeaturedGame/battlefield-bad-company-2-thumb.png?cb=1340391602">
        <h3>Battle Field</h3>
          <span class="price"><span class="strike-through"><span class="striked-text"><span class="amount">$&nbsp;67.00</span></span></span> <ins><span class="amount">$&nbsp;23.00</span></ins></span>
      </a>
        <a class="add_to_cart_button button product_type_simple" data-product_id="185" rel="nofollow" href="#">Add to cart</a>
    </li>

    <li class="product pro first">
      <a href="#">
          <span class="onsale">Sale!</span>
        <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="http://web-vassets.ea.com/Assets/Resources/Image/FeaturedGame/battlefield-bad-company-2-thumb.png?cb=1340391602">
        <h3>Battle Field</h3>
          <span class="price"><span class="strike-through"><span class="striked-text"><span class="amount">$&nbsp;67.00</span></span></span> <ins><span class="amount">$&nbsp;23.00</span></ins></span>
      </a>
        <a class="add_to_cart_button button product_type_simple" data-product_id="185" rel="nofollow" href="#">Add to cart</a>
    </li>
  </ul>

The live demo example can be seen here http://tinkerbin.com/7dnpFPL3. You can see there in a row three columns. At the bottom of every column there is a button called Add To Cart. Now as you can see in every column there is different length of contents. This content length is pushing the button to the bottom part. The last two columns have less content that’s why the button is at the middle of the content. Now I want as like the first content the button position of the last two content should be at the bottom of every content div. Whatever the length of the content it will not effect the button position. The button should always at the bottom of the content. I can’t give any fixed height of the content. Becacuse the length of content may very in each column.I can’t change the markup to use table instead of ul and li. The markup for ul and li is compulsory. Inside them I can change the class name or markup. So can someone tell me how to place the buttons at the bottom of content? Any help and suggestions will be appreciable.

I want the output something like this

Answer 1

I would use javascript to make the h3 elements containing the item titles all as tall as the longest title.

Fiddle: http://jsfiddle.net/633nc/

Javascript

    function makeElementsSameHeight(element){
        $element = $(element);
        // check if element exists
        if (!$element.length){
            return false;
        }           
        // get number of elements
        numberElements = $element.length;
        lengthArray = [];
        for (i=0;i<numberElements;i++){
            //put height of each element into an array
            lengthArray.push( $element.eq(i).height() );
        }
        
        // calculate maximum height
        largestHeight = Math.max.apply(Math, lengthArray);
        // apply maximum height to all elements
        $element.css('min-height',largestHeight + 'px');;
    }
    
    makeElementsSameHeight('.product h3');

Mr. Alien is right about your markup being a mess. You should clean it up before worrying about this kind of thing.