PDA

View Full Version : bottom-aligned text



realtimethrill
Nov 30th, 2008, 05:15 AM
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!

oesxyl
Nov 30th, 2008, 06:28 AM
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

realtimethrill
Nov 30th, 2008, 06:55 PM
That didn't work, but thank you.

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

oesxyl
Nov 30th, 2008, 07:01 PM
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

realtimethrill
Dec 5th, 2008, 04:59 AM
http://www.austen.talktalk.net/bottomAlignText.html

thanks for having a look :)

oesxyl
Dec 5th, 2008, 05:09 AM
http://www.austen.talktalk.net/bottomAlignText.html

thanks for having a look :)
try this:


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


best regards

realtimethrill
Dec 6th, 2008, 04:43 AM
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!

realtimethrill
Dec 16th, 2008, 03:20 AM
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?