Anordnung von DIV-Boxen untereinander klappt nicht...

[mingorius]

Hallo Forum,

ich möchte in einem DIV-Container mehrere DIV-Container untereinander anordnen.
Dazu habe ich folgendes CSS:

#content
{
width: 900px;
height:500px;
margin-top: 20px;
background-image: url(img/content2.png);
background-color: #FFFFFF;
border-radius: 5px;
-moz-box-shadow: 0px 0px 5px 2px #CCCCCC;
-webkit-box-shadow: 0px 0px 5px 2px #CCCCCC;
box-shadow: 0px 0px 5px 2px #CCCCCC;
}

#bandbox
{
width: 840px;
height: auto;
margin-top: 30px;
margin-left: 30px;
overflow: auto;
background-color: #CCCC99;
border-radius: 5px;
-moz-box-shadow: 0px 0px 5px 4px #CCCC99;
-webkit-box-shadow: 0px 0px 5px 4px #CCCC99;
box-shadow: 0px 0px 5px 4px #CCCC99;
}

Der html-Code sieht sinngemäß so aus:

<div id="content">
<div id="bandbox">Inhalt</div>
<div id="bandbox">Inhalt</div>
</div>

Die beiden Container "bandbox" werden untereinander angezeigt.
Allerdings liegt die obere "bandbox", obwohl ein margin-top angegeben ist, mit der Oberkante genau auf der Oberkante von "content" auf. Wenn sich der margin-top-Wert von "bandbox" ändert, verschiebt sich auch "content" mit nach unten.

Wie kann ich klarmachen, dass sich "content" nicht verändert und "bandbox" ein Element in "content" ist?

Vielen Dank für die Hilfe!

 

[scroller]

#content {overflow:hidden;}

Gruß Michael

 

[mingorius]

YES!
Funktioniert jetzt so wie ich es wollte!

Vielen Dank nochmal Michael!