How to keep always keep a div at the bottom of another div

Problem

At current, i have some thumbnails that display information about them on hover over. The information is contained within a figcaption, then is made up of a title div, maincaption p, and footer p.

As each of the maincontent p sections vary in size, i'd like to know if its possible to keep the footer p at the bottom of the figcaption across all thumbnails to ensure they look even with each other.

At current, i have multiple id's for each footer div to manually line them all up due to maincontent p being a variety of sizes.

Any help would be appriciated!

One figcaption section example:

<figcaption class="caption">
<div class="captiontitle">Tracking Reel</div>
<p class="maincaption">Demonstrates different uses of image/motion tracking, including wire removal image replacement and rotoscoping. Attention to detail is key in this technique, a good eye essential.</p>
<p class="captionFooter">Adobe After Effects and Mocha were used.</p>
</figcaption>

One div CSS example:

.captionFooter
{
padding-top: 25px;
font-size: 16px;
}

My understanding is that, i'd like to be able to apply a style to .captionFooter that will apply to all the thumnails and keep it at the bottom, instead of pushing against .maincaption to keep it inline.

Problem courtesy of: Matt Meadows

Solution

If you want to keep a div at the bottom of div2, do this:

div{
  position: relative;
}

div2{
  position: absolute;
  bottom: 0;
}

Here is working fiddle: http://jsfiddle.net/KFuuL/1/

Solution courtesy of: Jeevan Jose

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.