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

Recommended Answers

All 3 Replies

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

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.

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.