Multiple Top-Fixed Divs? - css

Question

I have two divs:
-A header bar, which is fixed while scrolling, and stuck at the top of the page.
-A notification div, which contains a message banner that will slide down if triggered.
The header bar is fixed to the top fine, but I can't seem to get the notification div to fix itself just under it. Every time I try this, this div fixes to the top of the page in-front of my header bar; seemingly replacing it. Padding doesn't seem to help.
Can anybody offer me any suggestions, please?
Here is the working div:
#header {
text-align: left;
background-image:url(../Resources/Banner2.gif);
background-repeat:no-repeat;
background-color:#00ed32;
color:#FFF;
position:fixed;
width:100%;
top:0px;
left:0px;
padding:15px;
}
Here is the div I would like to fix under it:
.notify {
background: url(../resources/gradients.png)
repeat-x 0px 0px;
top: -40px;
left: 0px;
position:fixed;
z-index: 100;
width: 100%;
overflow: hidden;
}

Answer 1

The easiest way to do this is to put a "holder" bar at the top of the page and then nest the "header" and "notification" elements within there.
For example:
CSS
#holder {
left: 0;
position: fixed;
right: 0;
top: 0;
}
#header, .notify{
//what ever styles you have
//position: relative or static
}
HTML
<div id="holder">
<div id="header">...</div>
<div class="notify">...</div>
</div>
Edit
Working example: http://jsfiddle.net/Q6CWv/
Update
Adding a slide down effect on the .notify element should be fairly straight forward if you are using JQuery:
$('.notify').slideDown();
Working example: http://jsfiddle.net/Q6CWv/1/

Answer 2

Although the answer by #MyHeadHurts was somewhat helpful, it wasn't the best solution for me as when the notification popped down, it either overlapped the header bar or made it so that the header bar would not pop down until the notification did. I did have them in separate divs as suggested, but this could have been my fault.
My solution was to go into the JavaScript of the pop-down notification and change the "top" value to 3% of the page height. This now works perfectly, except that the header and notification bar don't align correctly if there are extreme levels of zoom applied.