Align bottom

HTML & CSS
1

Hello,

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

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?

:slight_smile:

2

Using vertical-align on block level elements (like <p>) is problematic. More about that here: http://css-tricks.com/what-is-vertical-align/

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

3

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

.bottom img {
  vertical-align: bottom;
}