HTML and CSS

Problem with an absolute div

Thread Solved

•

Join Date: Feb 2009

Posts: 38

Reputation: thacravedawg is an unknown quantity at this point

Solved Threads: 0

thacravedawg thacravedawg is offline

Offline

Light Poster

Problem with an absolute div

Oct 26th, 2009

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

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<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>
<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.

•