Posted by BeeRich on 07/03/07 08:07

On Jul 3, 3:30 am, Ben C <spams...@spam.eggs> wrote:
> On 2007-07-03, BeeRich <beer...@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>

Ah it worked. Now to apply it to my real application.

Cheers

[Back to original message]