2 divs problem with box shadow

I have 2 divs where the first is on top and the second is below that...

I have added shadow to the first div which is on top and looks well.

box-shadow: 0px 5px 5px #000000;
-moz-box-shadow: 0px 5px 5px #000000;
-webkit-box-shadow: 0px 5px 5px #000000;开发者_运维问答

But when i add a gradient css on the second div which is below, the first loses its shadow... or i dont know whats going on...

I need to be able to see the shadow of the first without adding margin to the second div below.

Thanks

EDIT: My mark up is:

<div id="header">
   <div class="960width"></div>
</div>
<div id="content">
   <div class="960width"></div>
</div>

My css is:

#content{
    background: #e5e5e5;
    background: -moz-linear-gradient(top, #e5e5e5 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
    background: -o-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
    background: -ms-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 );
    background: linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
    padding-top:15px;
}

#header{
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
    background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
    background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    padding:5px;
    box-shadow: 0px 5px 5px #000000;
    -moz-box-shadow: 0px 5px 5px #000000;
    -webkit-box-shadow: 0px 5px 5px #000000;
}

This is HTML tags :

<div id="top">
        <div id="back">
            [Content]
        </div>
</div>

your CSS was fine, you only need to change your HTML tag, if you do this, your problem is fix ... look at this Fiddle , i think this is what you meant ...

PS: if you gave width to the top DIV, you will see the shadow in right and left ...

PS2 : i changes the "ID"s name ...