div at bottom of parent div

I’m trying to get a div “float” to the bottom of the containing div.- e.g http://stackoverflow.com/questions/2147303/how-can-i-send-an-inner-div-to-the-bottom-of-its-parent-div The containing div is the element which is “matchHeighted”.

The pseudo-HTML contains:

<div class="content">
  <div class="frontpage-item">
       <div class="floatdown">
   <div class="frontpage-item">
   <div class="frontpage-item">
</div>

CSS

.frontpage-item {
    position: relative;
}
.frontpage-item .floatdown {
    bottom: 0;
    position: absolute;
}

js contains

    $(document).ready(function() {
        $(".frontpage-item").matchHeight(false);

The problem is that as soon as I “apply” position:absolute to the inner-div,- whether by css as above or later on via js/jquery (this is the actual idea), the height of the .frontpage-item div “collapses” to the height on it’s content without the inner div.

Clearly position:absolute breaks the flow - but I figured since matchHeight sets the height of the containing div explicitly this would have no effect. Somehow the flow-break bubbles up to this element afterall.

Is there any way to stop this or is there any other technique you know of to have the text of the inner-div aligned to the bottom of the outer div - without causing such a collapse? (been struggling with this for a couple of hours!)

[hubert17]

Check out my solution, LAZADA inspired.

HTML:

       <div class="col-sm-4 col-lg-4 col-md-4">
                    <div class="thumbnail" data-mh="mh">
                        <a href="#">
                            <img src="" />
                        </a>
                        <div class="caption">
                            <h4 class="pull-right">$7.50</h4>
                            <h4>
                                <a href="#">Ariel</a>
                            </h4>
                        </div>
                        <div class="ratings">
                            <p class="pull-right">15 reviews</p>
                            <p>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                                <span class="glyphicon glyphicon-star"></span>
                            </p>
                        </div>
                        <div id="btn-cartpadding"></div>
                        <div class="btn-addcart">
                            <a href="#" class="btn btn-block btn-warning">ADD TO CART</a>
                        </div>
                    </div>
                </div>

CSS:

        .thumbnail > a img {
            max-height: 200px;
        }
        .thumbnail {
            border: 1px solid rgba(0, 0, 0, 0.00);
            position: relative;
        }
        .thumbnail:hover {
            border: 1px solid #dddddd;
        }
        .thumbnail:hover div.btn-addcart {
            visibility: visible;
        }
        div.btn-addcart {
            visibility: hidden;
            padding: 3px;
            width: 100%;
            position: absolute;
            bottom: 0;
            right: 0;
        }
        #btn-cartpadding {
            height: 35px;
        }

[steve-acet]

I am trying to do the same, but your trick doesn’t work for me. Any other ideas?