Align end of a text to the bottom of a div

Question

I want to create a set of the newest messages that have been posted on my page. Those boxes should always be the same size (as they're in a row, instead of below each other) and consist of three parts:

• Heading (h3)
• Content (no specific tag)
• Author (span)

While it isn't that difficult to keep the heading always at the same position, I couldn't really think of a method of having the author to be always on the bottom of the box, no matter how much content there is above.

Perhaps I just think too complicated.

Thanks in advance for any help!

Answer 1

position: relative on the parent box, position: absolute; bottom: 0; on the author box.

I won't give you a full solution, because that would not really help.

CSS Positioning 101

Answer 2

you can use a wrapper set to relative from css and the span positioned absolute HTML

<div class="wrapper">
  <h3>Title</h3>
  <p>Title</p>
  <span class="author">Title</span>

CSS

.wrapper{position: relative; padding-bottom: 1em;} .author{position: absolute; bottom: 0; right: 0