...

View Full Version : bottom-aligned text



realtimethrill
11-30-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
11-30-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
11-30-2008, 06:55 PM
That didn't work, but thank you.

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

oesxyl
11-30-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
12-05-2008, 04:59 AM
http://www.austen.talktalk.net/bottomAlignText.html

thanks for having a look :)

oesxyl
12-05-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
12-06-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
12-16-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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum