Ben said:
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>
EFAULT_DTD = ['-//W3C//DTD HTML 4.01//EN',