Posted by Ben C on 07/03/07 07:30

On 2007-07-03, BeeRich <beerich@gmail.com> wrote:
> Hi folks.
>
> Question for the gurus.
>
> I have a box 200 wide, 200 tall. I insert text in there and it's
> larger than the box. So I set overflow to hidden. The result is
> text
> that starts at the beginning, and the end of the paragraph is sliced
> off at the end.
>
> How do I shove this vertically, so that the beginning is cut off, and
> the last parts of that text are shown, aligned to the bottom? The
> length of this text will change, so I need a way of aligning it so
> that the top part becomes hidden, not the bottom.

Use absolute positioning to put one box inside another and to align the
inner box with the bottom of the outer one. If you leave top and height
auto on the inner one, it will get its content height and overflow its
container upwards.

<style type="text/css">
#container
{
position: relative; /* so it's containing block for contents */
height: 100px; /* Or use 200px obviously */
width: 200px;
background-color: palegreen;
margin-top: 200px; /* just so we can see the top clearly */
overflow: hidden;
}
#contents
{
position: absolute;
bottom: 0; /* align it to bottom of container */
font-size: xx-large;
/* We leave top and height as auto */
}
</style>

...

<div id="container">
<div id="contents">
1 blah<br>
2 blah<br>
3 blah<br>
4 blah<br>
5 blah<br>
</div>
</div>

[Back to original message]