0

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
22
Views
4 Years
Discussion Span
Last Post by //Gonz
1

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

0

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.

0

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!

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.