bottom-aligned text

Hi
I'd like some text to sit at the bottom of its containing element (which has fixed dimensions). When the text is added to via JavaScript such that it stretches upwards into otherwise empty space and overflows the element, a vertical scroll bar should appear.

Visually speaking: a block of text should appear in an enclosing box with the bottom edge of the text against the bottom of the box. Should the text become too large for the box, the beginning of the text should be visible and a scroll bar should appear to make the end of the text revealable.

The best I've come up with is a two element solution:

<div style="height: 50px; width: 70px; overflow: auto; position:absolute; border:solid;">

<span style="position:absolute; bottom:0px;" >8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 </span>

</div>

The text sits nicely at the bottom of the parent div, but when it's as long as that above, the overflow is hidden and a scroll bar does not appear.

I've tried a display-table type solution with no success.

Any thoughts much appreciated!

Hi
I'd like some text to sit at the bottom of its containing element (which has fixed dimensions). When the text is added to via JavaScript such that it stretches upwards into otherwise empty space and overflows the element, a vertical scroll bar should appear.

Visually speaking: a block of text should appear in an enclosing box with the bottom edge of the text against the bottom of the box. Should the text become too large for the box, the beginning of the text should be visible and a scroll bar should appear to make the end of the text revealable.

The best I've come up with is a two element solution:

<div style="height: 50px; width: 70px; overflow: auto; position:absolute; border:solid;">

<span style="position:absolute; bottom:0px;" >8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 </span>

</div>

The text sits nicely at the bottom of the parent div, but when it's as long as that above, the overflow is hidden and a scroll bar does not appear.

I've tried a display-table type solution with no success.

Any thoughts much appreciated!
try to set overflow: auto to the span element.

regards

That didn't work, but thank you.

(I think the overflow property only applies to elements with fixed dimensions.)

That didn't work, but thank you.

(I think the overflow property only applies to elements with fixed dimensions.)
post a link to the test page, please.

best regards

http://www.austen.talktalk.net/bottomAlignText.html

thanks for having a look :)

http://www.austen.talktalk.net/bottomAlignText.html

thanks for having a look :)
try this:

.thespan {
bottom:0px;
position:absolute;
top:0pt;
}


best regards

The scroll bar appeared, but the shorter version of the text didn't sit at the bottom of the box.

Please keep the ideas coming as I'm totally at a loss!

At the risk of hassling everyone with the same question again... Would it be fair to conclude that the only way to make this work is with JavaScript?