Okay so I'm building a site with a bit of an unusual and complex layout. It has a static header div of a fixed height. A body div of a variable height that must be positioned absolutely for overlapping. And I need there to be a footer directly below the absolute div. Here is the basic layout of the css/html
<style type="text/css">
#page_wrapper
{
width:800px;
margin-left:auto;
margin-right:auto;
}
#header_wrapper
{
width:800px;
height:140px;
}
#header
{
width:800px;
height:140px;
}
#body_wrapper
{
width:800px;
position:absolute;
display:block;
}
.header_transition
{
width:800px;
height:45px;
position:absolute;
left:0px;
top:0px;
background-image:url('img/green_bar_cut.png');
z-index:-1;
}
#body_contents_wrapper
{
width:800px;
position:absolute;
top:13px;
left:0px;
z-index:1;
}
#body_contents
{
width:800px;
position:absolute;
top:32px;
left:0px;
background-image:url('img/body_bg.png');
z-index:2;
}
#content_wrapper
{
width:575px;
float:left;
margin-top:-32px;
}
#content
{
width:510px;
margin-left:30px;
margin-right:35px;
}
.content
{
width:510px;
}
#footer_wrapper
{
width:800px;
height:105px;
clear:both;
}
</style>
<html>
<div id="page_wrapper">
<div id="page_header">
<div id="header_wrapper">
<div id="header">
</div>
</div>
</div>
<div id="body_wrapper">
<div class="header_transition"></div>
<div id="body_contents_wrapper">
<div id="body_contents">
<div id="content_wrapper">
<div id="content">
<div class="content">
<--
Start Content Here
-->
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer_wrapper">
<--
This container is now showing up at the top edge of div id body_contents...
-->
</div>
</div>
</html>Basically, I have everything in the top portion of the document working properly. I just can't get my footer to work below my absolutely positioned element. I have tried wrapping div id body_contents in another div that is positioned statically and no marbles. Please help me get my footer to display in the right place.