Verschachtelte Divs, border, margin erzeugt falsche anzeige

[Milchknilch]

Hallo  Ihr spezialisten,

ich bin knapp davor mit dem Kopf durch die Wand zu rennen. Und bevor ich danach zum Arzt muss, schau ich erstmal hier vorbei.

Ich habe 4 verschachtelte Divs wie folgt:

<div id='container_bg_top'>
  <div id='container_bg_bottom'>
   <div id='container_main'>
    <div id='container_navi'>
     </div>

<div id='container_sidebar_right'>
    </div>

<div id='container_content'>

</div>
    <br /><br />
    <div id='container_footer'>
    </div>
   </div>
  </div>
 </div>

-------CSS-----------------------------------------

body
{
 margin: 0px;
 padding: 0px;
 background: #ffffff url(images/bg_body.jpg) top center repeat-y;
 font-family: Arial, 'Lucida Grande', 'Lucida Sans Unicode', 'Trebuchet MS', Trebuchet, sans-serif;
 font-size: 12px;
 color: #333333;
 border: 10px solid #ff0000;
}

#container_bg_top
{
 width: 100%;
 margin: 0px 0px 0px 0px;
 padding: 0px;
 background: transparent url(images/bg_top.jpg) top center no-repeat;
 outline: 1px solid #ff0000;
}

#container_bg_bottom
{
 width: 100%;
 margin: 0px;
 background: transparent url(images/bg_bottom.jpg) bottom center no-repeat;

}

#container_main
{
 width: 700px;
 margin: 0px auto;
}

#container_navi
 {
  width: 360px;
  height: 280px;
 }

--------------------------------------------------

Das Problem ist nun folgendes
gebe ich in container navi einen margin-top an, so wendet Opera und Firefox (mit denen arbeite ich momentan)  den margin auf das div container_bg-top an... Das macht meiner meinung nach überhaupt keinen sinn. Die margin angabe in container_bg_top hat absolut keine auswirkungen mehr...

Aber jetzt kommts, wenn das container_bg_top div eine border von min1 px bekommt, dann funktioniert alles wie es soll

Ich wäre sehr dankvar, wenn mir das einer schlüssig erklären könnte. Ich bin mit meinem Css echt am Ende.

Gruß Milchknilch