Align text to the bottom of a big element

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

Sidharth Mudgal · Answer 1 · 2012-12-17T02:47:01.450

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:

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

Updated fiddle

edited Dec 17 '12 at 02:47

answered Dec 17 '12 at 02:40

Sidharth Mudgal

4,234
19
25

The problem with this is that the `` does not fill the area anymore (I think OP wanted the whole thing to be clickable). – kmoney12 Dec 17 '12 at 02:41
The problem with that is this: http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct – Nicolas Dec 17 '12 at 02:51

kmoney12 · Accepted Answer · 2012-12-17T02:54:28.230

2

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.

edited Dec 17 '12 at 02:54

answered Dec 17 '12 at 02:45

kmoney12

4,413
5
37
59

Thanks but the problem with that is this: http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct – Nicolas Dec 17 '12 at 02:48
That does work! but it still is not a very elegant solution. I would think there must be a way to truly align it to the bottom... – Nicolas Dec 17 '12 at 03:08
I don't think you can without some sort of position tag. See: http://stackoverflow.com/questions/5288336/put-text-at-bottom-of-div – kmoney12 Dec 17 '12 at 03:59

Tyler Durden · Answer 3 · 2012-12-18T03:53:01.160

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?

Thanks but I need the whole div to be "clickable" – Nicolas Dec 17 '12 at 02:50 — Nicolas, Dec 17 '12 at 02:50

Align text to the bottom of a big element

3 Answers3