CODEWITHSUNDEEP
htmlcsscss-float
user1022585
user1022585

Reputation: 13651

html float bottom

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?

Upvotes: 1

Views: 7189

Answers (4)

JosephRT
JosephRT

Reputation: 545

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>

Upvotes: 0

Pekka
Pekka

Reputation: 449415

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

Upvotes: 1

Siblja
Siblja

Reputation: 859

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>

Upvotes: 0

user240141
user240141

Reputation:

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

Upvotes: 0

Related Questions