Positioning a DIV directly under 100% width auto-height fixed-position DIV

Question

So, first post here, and I have been going nuts trying to figure out the answer to this problem.

I have two divs:

#splash {
width:100%;
min-width:1024px;
height:auto;
position:fixed;
top:80px;
z-index:-1;
}

#maincontentwrap {
width:100%;
min-width:1024px;
height:2000px;
z-index:100;
background:#838d82;
}

The idea I am trying to express is that I want #maincontentwrap to be positioned directly under #splash, but I want #maincontentwrap to remain fixed in position while #splash scrolls over it. I guess the problem lay in the fact that I'm trying to position something directly under another that has a varying height.

Any insight into this matter would be greatly appreciated. Two days of tinkering has not turned up much.

Thanks in advance!!

Answer 1

You should use position: fixed or position: absolute in your #maincontentwrap and adjust the margins and paddings accordling to the height of #splash .

If the height is determined at runtime, you should consider using JavaScript to calculate and set the margins for #maincontentwrap .