Hallo

ich habe ein Verständnisproblem und finde nirgends eine sauber Beschreibung des Problems, hab aber im Hinterkopf dass ich das schon mal irgendwo gelesen habe... aber eben finds nimmer.

Mein Problem ist folgendes: Ich habe zwei verschachtelte Divs. Ins äussere lege ich ein Backgroundbild, dem Inneren gebe ich rundrum ein margin, um das innere div 20px nach innen zu schieben.

Wenn ich den Code nun wie hier schreibe, wird mir das backgroundbild des äusseren div (#header) 20px nach unten geschoben, wie wenn ich diesem Div ein padding gegeben hätte. Die Grösse des Divs stimmt nur das Backgroundbild wird verschoben und auch nur nach unten, lusterweise nicht nach rechts, dort hätte das innerdiv ja auch ein margin von 20px.

Wenn ich dem #header-inner anstatt margin ein padding mit denselben Werten gebe funzt alles richtig. Und... wenn ich dem #header einen border gebe stellt er das backgroundbild auch an die richtige Position.

Äähh... Bahnhof... Versteh da die Logik nicht.

  
<div id="header">  
  <div id="header-inner">  
    <p>Hier steht mein Header-Text.</p>  
  </div>  
</div>  

  
#header {  
  background: url(meinbild.jpg) no-repeat;  
}  
  
#header-inner {  
  height: 120px;  
  margin: 20px 20px 0 20px;  
}  

Ich weiss, dass man dies nicht zwingend mit 2 Divs lösen muss, ich arbeite aber mit dem Zen Theme in Drupal, welches aus Kompatibilitätsgründen vor allem wegen IE so aufgebaut ist. Die Frage interessiert mich generell, denn das Problem kann ja auch in anderen Konstellationen auftreten.

Kann mir jemand sagen WIESO CSS so eigenartig reagiert und wo ich dazu genauere Beschreibungen finde?

Besten Dank für eure Tipps oder Erklärungen.
Pierre