Multiple Top-Fixed Divs?

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/