html float bottom

Question

I want to make text float to the very bottom right hand corner of an existing tag.

I'm still using old school tables (editing existing code). My code is this:

<table border="0" width="100%" cellspacing="0" cellpadding="0">
   <tr>
     <td width="50%"></td>
     <td width="50%" valign="top">
       <table border="0" width="100%" cellspacing="0" cellpadding="0">
          <tr>
             <td width="100%" valign="top">KEEP UP TOP</td>
          </tr>
       </table>FLOAT BOTTOM
     </td>
   </tr>
 </table>

The text that says FLOAT BOTTOM, doesnt obviously. How do make it so that always stays at the very bottom right corner?

Duplicate question: http://stackoverflow.com/questions/499829/css-wrap-text-around-a-bottom-right-div — ScottS, Dec 07 '11 at 19:56
bottom of what? the td? the table? should it overlap the inner table? what are you trying to accomplish? — Daniel Moses, Dec 07 '11 at 19:57

score 1 · Answer 1 · answered Dec 07 '11 at 19:57

The usual way to do this with tables is

Create a second row
Give that row (and the cells therein) a fixed height
Put the text into the right hand column in the second row

One CSS way to do this (without tables) would be

Give the container you want to place the text in the bottom right corner of position: relative
Wrap the text inside a <span>
Give the span position: absolute; bottom: 0px; right: 0px

score 0 · Answer 2 · answered Dec 07 '11 at 19:55

0

Use style {style="vertical-align:baseline; text-align:right"}

answered Dec 07 '11 at 19:55

score 0 · Answer 3 · answered Dec 07 '11 at 19:56

0

Try this:

    <table border="0" width="100%" cellspacing="0" cellpadding="0">
   <tr>
     <td width="50%"></td>
     <td width="50%" valign="top">
       <table border="0" width="100%" cellspacing="0" cellpadding="0">
          <tr>
             <td width="100%" valign="top">KEEP UP TOP</td>
          </tr>
       </table><p style="position:absolute; bottom:0px; right:0px;">FLOAT BOTTOM</p>
     </td>
   </tr>
 </table>

answered Dec 07 '11 at 19:56

Siblja

859
2
12
19

doesnt seem to do it. I think the valign=top is messing things up. – user1022585 Dec 07 '11 at 20:06

score 0 · Answer 4 · answered Dec 07 '11 at 19:58

0

To make it float to the bottom right of the data cell that contains it you could probably do

<span style="float:right; vertical-align:text-bottom">FLOAT BOTTOM</span>

answered Dec 07 '11 at 19:58

JosephRT

545
4
19

For some reason it makes it float underneath the table, not at the base of the cell. – user1022585 Dec 07 '11 at 20:07

html float bottom

4 Answers4