my outer div background extends when using negative margins in the child div - css

Question

Here is my stylesheet code
#topwrapper {
background: url(images/orangebg.jpg) repeat-x top;
height: 502px;
}
#mainwrapper {
background:url(images/bluebg.jpg) repeat;
}
#maincontent {
margin: 0 auto;
width: 961px;
background-color:#F0EFEF;
position: relative;
margin-top: -312px;
}
I want the maincontent div to move up into the orange div but it is bringing the bluebg.jpg with it (cutting short the orangebg.jpg). When I tried using -top: 312px; instead of the negative margin it added space below the #maincontent.
The code on the page reads
<div id="topwrapper"></div>
<div id="mainwrapper"><div id="maincontent">test test</div></div>
View on jsfiddle
jsfiddle.net/bdh2a - remove the margin-top: -312px; and that is how I need the orange background to look with the grey box on top of it

Answer 1

maybe you can set margin-top: -312px; to mainwrapper div?

Answer 2

Re-arrange your html like this:
<div id="mainwrapper">
<div id="maincontent"><p>text text</p></div>
<div id="topwrapper"></div>
</div>
Then use this CSS setup (adjusting the heights and stuff of course):
#mainwrapper{
height:100%;
background-color:#FF4200;
width:100%;
}
#topwrapper {
background-color:#1B00FF;
height:100px;
min-width:100%;
margin:0 auto;
position:absolute;
top:0;
z-index:0;
}
#maincontent {
margin: 0 auto;
padding:20px;
top:20px;
background-color:#ccc;
position: relative;
color:#000;
z-index:1;
width:80%
}
Check out this jsfiddle:http://jsfiddle.net/imakeitpretty/yqnfk/
There is a lot of greek text in there because you can't see the orange expand without it. "text text" isn't enough to do it.

Answer 3

I Found a solution!!
#topwrapper {
background: url(images/orangebg.jpg) repeat-x top;
height: 502px;
}
#mainwrapper {
background:url(images/bluebg.jpg) repeat;
float: left;
width: 100%;
display: block;
position: relative;
}
#maincontent {
width: 961px;
background-color:#F0EFEF;
position: relative;
margin-top: -312px;
margin-left: -480px;
position: relative;
float: left;
left: 50%;
}
The code on the page stays the same