Hi. I'm having some issues with a move advanced CSS feature.

What I want is for my footer DIV (#footer) to always be below my Body DIV (#body). The problem is, I don't know how to position #footer below #body because #body is always changing depending on content.

Some facts: All elements use Absolute positioning. The layout is a centered fixed design.


What I don't want is for my #footer to always be on the screen. I simply want it at the bottom of my document. Using Bottom: 0; doesn't work since this places the DIV at the bottom of the window and not the bottom of the page's content.

Plz help. Here's some code:

#body {position:absolute; background: #83BAD8; 
	border: 1px solid #0C4599; left:0px; top:311px; width:702px; height:288px;}
#footer {position: relative;  width:702px; height:53px; top: 50px; margin: 0 auto;}

<div id="body"> 
<p>text text text</p>
</div>

<div id="footer">
<p>copyright | contact us....</p>
</div>

Plz help!!!

Ok nevermind, I figured it out.

While writting the problem I came up with an idea to Nest the #footer DIV into the #body DIV and then use a negative bottom value on the #footer to display it at the bottom of the content every time.

Now... let that be a lesson to all of you... cough cough...