CSS3 box-shadow for overlapping-like divs

Question

I'm trying to achieve this effect with css3:

The HTML code is cleanly something like

...
<header>
    ...
</header>

<div id="wrapper">
    ...
</div>
...

and the css is, for the moment, something like

header {
    display: block;
    width: 900px;
    height: 230px;
    margin: 0 auto;
    border: 1px solid #211C18;
    ...
    box-shadow: 2px 4px 20px #005377;
    -moz-box-shadow: 2px 4px 20px #005377;
    -webkit-box-shadow: 2px 4px 20px #005377;
}

#wrapper {
    width: 820px;    
    margin: 0 auto;
    ...
    border-right: 1px solid #211C18;
    border-bottom: 1px solid #211C18;
    border-left: 1px solid #211C18;
    ...
    box-shadow: 2px 4px 20px #005377;
    -moz-box-shadow: 2px 4px 20px #005377;
    -webkit-box-shadow: 2px 4px 20px #005377;
}

In order to obtain the desired result, I need to:

1. Hide the top shadow of the main div (no problem with that)
2. Bring header's bottom shadow in front of the main div, and not behind as it is right now.

I've been reading a lot about box-shadow, and I haven't found a solution that really pleases me... Any idea?

Answer 1

This jsfiddle does what you want.

The way it works is with a main #wrap element that centres the content and creates a coordinate map for the absolutely positioned #main element. It does this because of its position: relative CSS rule. You end up with the following markup:

<div id="wrap">
    <header></header>
    <div id="main"></div>
</div>

The header is then placed inside of this and given position: relative and a z-index to set it stacking above the #main container.

Finally #main is absolutely positioned below the header. The CSS looks like so:

/* centre content and create coordinate map for absolutely positioned #main */
#wrap {
    width: 300px;
    margin: 20px auto;
    position: relative;
}

header, #main {
    background: #fff;

    /* rounded corners */
    border: 1px solid #211C18;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;    

    /* dropshadows */
    box-shadow: 2px 4px 20px #005377;
    -moz-box-shadow: 2px 4px 20px #005377;
    -webkit-box-shadow: 2px 4px 20px #005377;
}

header {
    display: block;
    width: 300px;
    height: 50px;

    /* stack above the #main container */
    position: relative;
    z-index: 2;
}

#main {
    width: 200px;
    height: 70px;

    /* stack below the header and underlap it...if that's even a word */
    position: absolute;
    z-index: 1;
    top: 40px;
    left: 50px;
}

Answer 2

I just had some luck using relative positioning.

For example.

1st div has a box-shadow, and a bottom margin. 2nd div slides up under the shadow.

#firstdiv {width: 960px; box-shadow: 5px 5px 5px #ccc; margin-bottom: 10px;}
#seconddiv {width: 960px; position: relative; top: -10px;}

It's not the best solution but it works for me.