Re: Clip Overflow, Vertical-Align Bottom...how do I do this?
- From: BeeRich <beerich@xxxxxxxxx>
- Date: Tue, 03 Jul 2007 01:07:24 -0700
On Jul 3, 3:30 am, Ben C <spams...@xxxxxxxxx> wrote:
On 2007-07-03, BeeRich <beer...@xxxxxxxxx> 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
.
- References:
- Prev by Date: Re: Is 800 x 600 old hat?
- Next by Date: Re: Clip Overflow, Vertical-Align Bottom...how do I do this?
- Previous by thread: Re: Clip Overflow, Vertical-Align Bottom...how do I do this?
- Next by thread: Putting a not-equal sign on a page ....
- Index(es):
Relevant Pages
|
