PDA

View Full Version : relative bottom?

Duffman12
03-05-2008, 07:16 PM
I'm trying to get a div to always appear at the bottom of another div. I figured that making the position relative and setting bottom to 0 would do the trick. no dice. any ideas?

<html>
<head>
<style type="text/css" media="screen">
#container{
border: 1px solid black;
height: 200px;
}
#bottom{
position: relative;
bottom: 0;
background: blue;
height: 20px;
width: 200px;
}
</style>
</head>
<body>

<div id="container">

<div id="bottom"></div>

</div>

</body>
</html>
Duffman12
03-05-2008, 07:26 PM
i figured it out, but i'm still a little confused as to why it works. i made the container div's position relative, and the bottom div's position absolute:

<html>
<head>
<style type="text/css" media="screen">
#container{
position: relative;
border: 1px solid black;
height: 200px;
}
#bottom{
position: absolute;
bottom: 0;
background: blue;
height: 20px;
width: 200px;
}
</style>
</head>
<body>

<div id="container">

<div id="bottom"></div>

</div>

</body>
</html>

if you take out the relative position of the container, the bottom div goes to the bottom of the view port. why does the position of the container affect it's children's position?
VIPStephan
03-05-2008, 07:49 PM
Because that’s how it works. The absolute position is relative to the next positioned ancestor (absolute, relative, or fixed). If no ancestor is positioned (or position is set to static) the absolute position is relative to the viewport. These are the specifications. Good that you found out yourself, though, because that’s one of the less obvious things.
maxvee8
03-05-2008, 07:57 PM
absolute positioning means the "div" will never move from that place you put it
croatiankid
03-05-2008, 09:48 PM
Changing position to relative and then changing top, bottom, left and right offsets the box from where it would normally appear.

Position:absolute positions the box with respect to its containing block (element).