Question

I have something like this

<td>
    <a href="#">
        <span class="foo">
             Link Text
        </span>
    </a>
</td>

and I have

.foo
{
    height: 90px;
    display: inline-block;
    background: #e8edff url('foo.png') top center no-repeat;
    vertical-align: bottom;
}

and it renders something like this (with the background image)

 ________________
|    Link Text   |
|                |
|                |
|                |
|                |
|________________|

How can i make it so I renders like this?

 ________________
|                |
|                |
|                |
|                |
|    Link Text   |
|________________|

The requirement is the every cell has to have a hyperlink and a background image and some text at the bottom.

Thanks

EDIT: here’s a jsfiddle link of what I’m trying to do.

Answer 1

give vertical-align: bottom;
in TD instead of span

EDIT:
write like this

.foo
{
    height: 50px;
    background: #e8edff url('http://www.emblemmart.com/emblems-badges-insignias/media/logos/medium/BMW.gif') top center no-repeat;
    display:table-cell;
    vertical-align:bottom;

}

check this http://jsfiddle.net/sandeep/yBKZS/1/