Align text vertically in a box

[josoap]

Hi,

I need to align some text in the bottom right corner of a box.

So far I've discovered that the vertical-align:text-bottom has to be inline. But it's not working!!!

Can anyone help please.

In my html doc I have the following:

Code: Select all

 
<div id= "box1" >
<span style= "vertical-align:text-bottom">My text</span>
</div>

In the stylesheet I have:

Code: Select all

 
#box1 {
 position: absolute;
 width: 125px;
 height: 100px;
 top:150px;
 left:100px;
 text-decoration: none;
 font-size: 0.96em;
 font-family: Arial, Helvetica, sans-serif;
 color:#1880B4;
 text-indent:60px;
 display:block;
 border-style:solid;
 border: 1px 1px 1px 1px;
 border-color:#980045;
 padding: 0px 0px 0px 0px;
 margin: 0px 0px 0px 0px;
 background-color:#FFFFFF;
}

Any help greatly appreciated.

Jo

[hschmitz]

Originally Posted by josoap

So far I've discovered that the vertical-align:text-bottom has to be inline.

I don't see why that should make a difference.

Why not try

Code: Select all

<div id= "box1" >
<span id="textbox">My text</span>
</div>

and

Code: Select all

#textbox {
  position: absolute;
  right: 0px;
  bottom: 0px;
}

[Ryan Fait]

You'll need to add position: relative; to #box1 before hschmitz code will work

[hschmitz]

Originally Posted by Ryan Fait

You'll need to add position: relative; to #box1 before hschmitz code will work

I thought it would work with the original position:absolute; as well.