Scott Leis Scott Leis - 5 months ago 7
CSS Question

Align image with bottom of 2-line text in absolutely positioned div?

I have an absolutely positioned div containing an image next to two lines of text, and a margin in between.

I want the bottom of the image aligned either with the bottom of the second line of text, or with the bottom of the div.

Here's an image showing what it should look like:
image aligned with bottom of text

Here's the XHTML I've been using, but this makes the image align with the bottom of the first line of text instead of the second:

<div style="position: absolute; bottom:0; right:0">
<img src="images/footer-subscribe.png" title="Subscribe to ISW news" alt="Subscribe to ISW news" style="vertical-align: bottom; margin-right: 25px"></img>
© Copyright 2011 ISW Australia<br/>Privacy Statement | Disclaimer
</div>


I figure I could position the image more easily with CSS background-image, but it's going to become a link.

Answer

Just wrap your text in an inline-block div:

<div style="position: absolute; bottom:0; right:0">  
  <img src="images/footer-subscribe.png" title="Subscribe to ISW news" alt="Subscribe to ISW news" style="vertical-align: bottom; margin-right: 25px" />  
  <div style="display:inline-block;">© Copyright 2011 ISW Australia<br/>Privacy Statement | Disclaimer</div>
</div>