Welcome to WebmasterWorld Guest from 3.227.2.109

Forum Moderators: open

Message Too Old, No Replies

vertical-align: bottom within a td

Already using vertical-align: top..

     
3:19 am on Apr 5, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 9, 2005
posts:183
votes: 0


I hope the following code is self explanitory

<td style=" vertical-align: top;">

This text is aligned to the top of the cell

<div>Id like this text aligned to the bottom of the same cell, but how?</div>

</td>

Any ideas? Im stumped

4:00 am on Apr 5, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


<td style="vertical-align: top; position: relative;">

This text is aligned to the top of the cell

<div style="position: absolute; bottom: 0; left: 0;">I'd like this text aligned to the bottom of the same cell, but how?</div>
</td>


That's one way, but it may not necessarily be ideal, depending on surrounding markup.

4:09 am on Apr 5, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 9, 2005
posts:183
votes: 0


Thanks for your reply

That code makes the text go to the bottom left corner of the page, well outside the cell. It does work in IE, but not firefox or safari

There really isnt much surrounding code.. Its just a table with no attributes.

4:11 am on Apr 5, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


Did you add
position: relative
to the <td>?
4:11 am on Apr 5, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 9, 2005
posts:183
votes: 0


Yep i did
10:57 am on Apr 5, 2006 (gmt 0)

New User

10+ Year Member

joined:Apr 3, 2006
posts:13
votes: 0


You cannot use that position:relative; 'trick' in an element with display:table-cell;. It is possible to work around it though, say by adding yet an extra div-element, but it isn't pretty. However, I don't see a 'valid' reason for ever needing this functionality in a table; are you abusing the element?

[edited by: jatar_k at 4:28 pm (utc) on April 5, 2006]

8:29 pm on Apr 5, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 9, 2005
posts:183
votes: 0


I dont get what you are trying to say.. The "valid" reason i need to do this is because some text i want aligned to the top of the table cell, while other text i want on the bottom

Thats an abuse of what now? If you have a suggestion id like to hear it

10:03 pm on Apr 5, 2006 (gmt 0)

New User

10+ Year Member

joined:Apr 2, 2006
posts:9
votes: 0


I dont get what you are trying to say.. The "valid" reason i need to do this is because some text i want aligned to the top of the table cell, while other text i want on the bottom

Thats an abuse of what now? If you have a suggestion id like to hear it

I believe he would like to know what context the element is being used in. It's hard to tell without an explanation or the rest of your code.

Abuse of the element would be if you were using the td to layout text and/or images on your page.