Putting a div under text - html

Question

My HTML code:
<div id="backgroundH"></div>
<div id="header">
<h2> Premium Store </h2>
</div>
My CSS code:
#backgroundH {
width: 100%;
height: 50px;
background-color: #dddddd;
}
#header {
top:-50px;
color:black;
font-family:Courier New;
}
body {
background-color:#cccccc;
}
So why isn't it working? I tried everything. Can somebody show me how to put that text over my div which I am using as a background in this case?
It should look like a gray background underneath a text which says "premium store".

Answer 1

You've got the order of your divs wrong it should be like this:
http://jsfiddle.net/mCGt8/
html:
<div id="backgroundH">
<div id="header">
<h2> Premium Store </h2>
</div>
</div>
css:
#backgroundH {
width: 100%;
height: 50px;
background-color: #dddddd;
}
#header {
top:-50px;
color:black;
font-family:Courier New;
}
body {
background-color:#cccccc;
}

Answer 2

In text-div you are using top: -50px, so I believe you want text-div sibling to background-div and you missed position: relative.
#header {
position: relative;
top: -50px;
color: black;
font-family: Courier New;
}
The problem with position: relative is that the space that div would fill before top: -50px stills there.
So, you have 2 ways:
CSS: use margin-top: -50px;
HTML: nest text-div to background-div if it's possible. (preferred)