title: CSS3 box-shadow for overlapping-like divs
body: <p>I'm trying to achieve this effect with css3:</p>
  
  <p><img src="https://farm5.static.flickr.com/4101/4861024679_91976c9824_m.jpg" alt="header/main"></p>
  
  <p>The HTML code is cleanly something like</p>
  
  <pre><code>...
  &lt;header&gt;
      ...
  &lt;/header&gt;
  
  &lt;div id="wrapper"&gt;
      ...
  &lt;/div&gt;
  ...
  </code></pre>
  
  <p>and the css is, for the moment, something like</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>In order to obtain the desired result, I need to:</p>
  
  <ol>
  <li>Hide the top shadow of the main div <em>(no problem with that)</em></li>
  <li>Bring header's bottom shadow in front of the main div, and not behind as it is right now.</li>
  </ol>
  
  <p>I've been reading a lot about box-shadow, and I haven't found a solution that really pleases me...
  Any idea?</p>