Member Avatar for thacravedawg

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.

  • 1 Contributor
  • 1 Reply
  • 106 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by thacravedawg

Dani AI

Generated

Absolute positioning removes an element from the normal flow, so later siblings (like the footer) behave as if that element does not exist. The behavior and rules for position are explained in the MDN documentation: position on MDN.

A simple, reliable CSS-first fix is to keep the body section in the flow and create the overlap visually. Pull the body up with a negative top margin (or transform: translateY() for a visual shift) while leaving it position: static/relative so the footer remains below. Add top padding inside the body equal to the overlap amount so content is not hidden behind the header, and manage stacking with z-index on positioned elements.

/* keep element in flow and visually overlap */
.main-body {
  position: relative;      /* stays in flow */
  margin-top: -32px;       /* visual overlap amount */
  padding-top: 32px;       /* prevent content hiding */
  z-index: 1;
}
.header {
  position: relative;
  z-index: 2;
}

If absolute positioning is unavoidable, make an in-flow spacer whose height matches the absolute element. Synchronize the spacer with the absolute element using a resize handler or, in modern browsers, a ResizeObserver so the footer is pushed down automatically.

function syncSpacer() {
  var abs = document.getElementById('absBody');
  var spacer = document.getElementById('spacer');
  spacer.style.height = abs.offsetHeight + 'px';
}
window.addEventListener('load', syncSpacer);
window.addEventListener('resize', syncSpacer);

/* or using ResizeObserver */
if ('ResizeObserver' in window) {
  new ResizeObserver(syncSpacer).observe(document.getElementById('absBody'));
}

Another modern CSS option is CSS Grid: put header and body into the same grid row and let them visually overlap while the grid still defines the footer row below. As noted, using background images in relative containers was a practical fix; the approaches above give alternative, robust ways to keep the footer positioned correctly without accidental overlap. For ResizeObserver and grid details see MDN: ResizeObserver and CSS Grid Layout.

Member Avatar for thacravedawg

I ended up having to get cute and use background-images in relative divs to get my needed end result. If anyone does know of a way to put a div of any position below a absolutely positioned div of relative size, it would be cool to see it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.