Align bottom


<div class="test">
          <p class="bottom">
          		<img src="source.png">

I’d like the p.bottom to always sit at the bottom of the div. Here’s what I’m trying:

.test {
	min-height: 200px;
        float: left;
.bottom {
	vertical-align: bottom;

But it doesn’t work…

Can someone help me with that problem?


Using vertical-align on block level elements (like <p>) is problematic. More about that here:

Within there is a link about aligning block level elements within block level elements to baseline.

You could just set the image itself to vertal-align: bottom instead:

.bottom img {
  vertical-align: bottom;