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


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>

One div CSS example:

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


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

  position: relative;

  position: absolute;
  bottom: 0;

Here is working fiddle:

Solution courtesy of: Jeevan Jose


There is currently no discussion for this recipe.

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