Probleme mit DIV's und CSS Margins

[BigPeter]

#bgshadow {  
  margin-top:         10px;  
  margin-bottom:      10px;  
  float:              center;  
  width:              900px;  
  height:             auto;  
  background-color:   #DDDDDD;  
}  
  
#header {  
  margin-top:         10px;  
  margin-bottom:      10px;  
  width:              880px;  
  background:         #FFFFFF url('../img/header.gif') repeat-x fixed;  
}

  <div align="center">  
  <div id="bgshadow">  
  <div id="header">  
    ... random Text  
    ... random Text  
    ... random Text  
  </div>  
  </div>  
  </div>

Irgendwie habe ich ein Verständnisproblem mit meinen lieben DIV's.

Ich will, dass der Header 10px verschoben unter dem Hintergrund-"Schatten" liegt. Nur wenn ich die margins setze verändert sich nichts. Wenn ich die margins auf 20px erweitere zieht sich auch der Hintergrund-"Schatten" mit runter ... hat irgendwer einen vernünftigen Work-a-round zur Hand oder eine Idee wie es besser klappt ?

Liebe Grüße

BIG PETER !