I have a document with the following structure:

<div id="top-nav></div>
<div id="main">
    <div id="col1"></div>
    <div id="col2"></div>
    <div id="col3"></div>
<div id="spacer"></div>
<div id="fixed-bottom-nav"></div>

Like it says - I have two divs (top-nav and main) that are absolutely positioned. The three col divs in the main div are floated and fluid. The bottom navigation div is fixed.

What's happening is that the spacer div after the main div is dropping out of the document flow - it's up near the top of the document. I've done both clears and clearfix to the div, and it still doesn't want to cooperate. I have no idea why it's doing this, or how to correct it. I've attached a screenshot - the problem div is the black bar under the navigation at the top of the page. It does this in every browser as well, so it must be something I'm missing about the structure of the CSS.

1 answer

da 40
This was chosen as the best answer

The spacer div is not dropping out of the document flow. It's exactly where it should be. The issue is that your previous two divs ARE out of the document flow because you've positioned them absolute.

What is the reason for positioning top-nav and main absolutely?

Answered over 8 years ago by da