|
|
Posted by windandwaves on 10/29/06 20:13
Ben C wrote:
> On 2006-10-28, windandwaves <nfrancken@gmail.com> wrote:
> > Hi Folk
> >
> > Can you do vertical-align bottom in a div or only really in a table?
>
> You can set it on inline level elements to move them relative to the
> line they're on. But if you want the effect of a box with a set height
> that contains another box at the bottom of it, use positioning. Set the
> outer box to position: relative (or position: absolute), and the inner
> box to position: absolute with bottom: 0px.
>
> You set position on the outer box just to make it the containing block
> for the inner box (i.e. the block the inner box is 0px from the bottom
> of).
>
> Using relative rather than absolute on the outer box keeps it "in the
> normal flow".
Hi, I tested it and it works a treat. THANK YOU
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<div id="outer" style="position: relative; height: 300px;
background-color: #ccc; width: 200px;">
<div id="inner" style="position: absolute; bottom: 0px;
background-color: #777; ">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque leo. Duis
arcu erat, posuere non, fringilla vel, ultricies ut, purus. Nunc
turpis. Nullam
hendrerit, elit nec molestie pellentesque, ligula ante tempor dui, eu
molestie
nibh erat sed sem. Maecenas orci. Donec aliquam imperdiet sapien.
</div>
</div>
</body>
</html>
Navigation:
[Reply to this message]
|