Align text to the bottom of a big <a> element - html

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">
Link to somewhere
</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:
<div class="thumbnail"><span>Link to somewhere</span></div>​​​​​​​​​
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.

Answer 2

This should help if you change the HTML accordingly:
.thumbnail{
position: absolute;
bottom: 0;
right: 0;
}
a{
display: block;
position: relative;
width: 200px;
height: 200px;
background-color: lightgrey;
}​
HTML:
<div class="thumbnail">Link to somewhere</div>​
Updated fiddle

Answer 3

Try this
.thumbnail
{
position: relative;
width: 200px;
height: 200px;
background-color: Orange;
display: block;
}
.thumbnail span
{
position: absolute;
right: 0px;
bottom: 0px;
display: block;
text-align: right;
background-color: Gray;
}
and change the HTML like so
<a class="thumbnail" href="#"><img
src="http://www.healthfiend.com/wp-content/uploads/2011/01/Facial-Exercises.jpg"
alt="face" /><span>Link to somewhere</span></a>
This makes the whole thing clickable and aligns the text to the bottom right. I replaced you div with an img tag as I assume for a thumbnail this is actually what you probably want in the end. Right?