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
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.