Member Avatar for //Gonz

Hi all
a div located below the top div is positioning itself roughly 200px higher than expected. The top div is filling the browser window as it should be; but the bottom div is overlapping the top div.
I hope this makes sense :S

The properties set for the top div are as follows:

div.top {
    height:100%;
    width:100%;
    min-height:400px;
    min-width:800px;
}

and the bottom div:

div.sec {
    position:relative;
    width:100%;
    height:100%;
    min-width:800px;
    min-height:400px;
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-position:center center;
}

and they are simply written in the body of the html as:

<body>
    <div class="top"></div>
    <div class="sec"></div>
</body>

Please see attached image below
bf77b2a706e914624b91e630f77d1157

  • 2 Contributors
  • 3 Replies
  • 2K Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by //Gonz

Dani AI

Generated

What you are running into is the mix of percent heights and out‑of‑flow children. A percentage height only works when every ancestor up to the root has an explicit height. If any link in that chain is auto, the math becomes murky and siblings that also say height:100% can appear to overlap. was right to ask about margins/floats too, because overflow and margin‑collapse can shift a section upward by a surprising amount. Your overflow:hidden fix works because it creates a new block formatting context, which stops that collapse. It is fine as a quick patch, but note it can clip shadows, dropdowns, or absolutely positioned children that stick out.

A more predictable pattern for a full‑viewport hero followed by a normal section:

/* Baseline */
html, body { height: 100%; margin: 0; }

/* Hero fills the viewport and contains its absolute overlay */
.hero { position: relative; min-height: 100vh; }
.hero > .overlay { position: absolute; inset: 20px; }

/* Next section sits below and self-contains floats/margins without clipping */
.section { display: flow-root; min-height: 100vh; }

And the markup:

<div class="hero">
  <div class="overlay">...</div>
</div>
<div class="section">...</div>

Notes you can try immediately:

  • Drop height:100% from the second section; min-height is safer when stacking vertical panels.
  • If you must use percentages, ensure html, body { height:100%; }.
  • Prefer display: flow-root over overflow:hidden when the goal is to contain floats and prevent margin collapse without clipping.
  • If a fixed background is involved, test on mobile; it behaves differently and can make sections look misaligned.

This should keep .section reliably below the hero without relying on overflow side effects.

Recommended Answers

All 3 Replies

Member Avatar for |-|x

Is that your entire css? You haven't specified any other margin or float values or anything for other elements?

Member Avatar for //Gonz

Thanks for your reply Hearth!
well what you actually see is an absolute positioned div with:

margin:20px;
top:0;
left:0;
right:0;
bottom:0;

the "top" is just a space filler to push everything else down. that is literally all the css code i have given the "top" and "sec" divs.

Member Avatar for //Gonz

Solved guys! for some reason the "sec" div was overflowing over the "top" div. i just set "overflow:hidden" on the "sec" div and it pushed it down to where it should be. Strange!

thanks anyways!

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.