Question

How can I align text to the bottom right of a big <a> element inside a div?

Here is what I have, but I want the text at the bottom of the box. I’ve searched a lot and nothing has worked for me:

<div class="thumbnail">
   <a href="http://link.com">Link to somewhere</a>
</div>​

with the following css:

.thumbnail{
  width: 200px;
  height: 200px;}

.thumbnail a{
  display: block;
  height: 100%;
  width: 100%;
  text-align: right;
  background-color: lightgrey;}​

http://jsfiddle.net/8JsPV/

Thank you

Answer 1

I changed your HTML and put the entire thing in an <a> tag so it is all clickable. jsFiddle Here.

HTML:

<a href="#"><div class="thumbnail"><span>Link to somewhere</span></div>​</a>​​​​​​​​

CSS:

 .thumbnail{
  width: 200px;
  height: 200px;
  position: relative;
  background-color: lightgrey;
}

.thumbnail span{
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
}​

EDIT:

To do it WITHOUT putting an div inside the <a>, try this.