Wie verhält sich ein div ohne border

[Bla]

Hallo!

Nachdem googeln nicht geholfen hat darf ich hier mal nachfragen :-)

Folgendes Beispiel:
div1, div2 und div3 beinhaltet irgendeinen Text und wird vom wrapper umschlossen.
Der Text aus div2 soll div1 rechts umfließen und einen Abstand von 50px von oben haben.
Der Text aus div3 soll darunter stehen.

Mit unten angeführten Code funktioniert das auch.
Wenn der wrapper jetzt jedoch keinen Rahmen haben soll (border-width: 0px oder border-style: none) funktioniert das nicht mehr und verhält sich so als würde der wrapper gar nicht existieren. Außerdem hat dann div2 keinen Abstand von 50px von oben.

Kann mir das Verhalten jemand erklären oder mir sagen wie man das korrekt löst? Meine einzige Idee wäre die border-color auf transparent zu setzen. Ist aber irgendwie unschön.

Danke!

HTML:

  
<div id='wrapper'>  
  
    <div id='div1'>  
        aaaaa <br />  
        aaaaa <br />  
        aaaaa <br />  
        aaaaa <br />  
        aaaaa <br />  
        aaaaa <br />  
    </div>  
  
    <div id='div2'>  
        bbbbb  
    </div>  
  
    <div id='div3'>  
        ccccc  
    </div>  
  
</div>  

CSS:

  
#wrapper  
{  
  border-width: 1px;  
  border-color: black;  
  border-style: solid;  
}  
  
#div1  
{  
  float:left;  
}  
  
#div2  
{  
  margin-top: 50px;  
}  
  
#div3  
{  
  clear: both;  
}  

[Der Martin]

Hi,

Wenn der wrapper jetzt jedoch keinen Rahmen haben soll (border-width: 0px oder border-style: none) funktioniert das nicht mehr und verhält sich so als würde der wrapper gar nicht existieren. Außerdem hat dann div2 keinen Abstand von 50px von oben.

ohne das Beispiel in jedem Detail verstanden zu haben, vermute ich mal, dass es sich hier um den Effekt von Collapsing Margins handelt: Dort, wo margins zweier Elemente direkt zusammentreffen, fallen sie zusammen, so dass nur noch der größere der beiden zählt und der kleinere darin "verschwindet".

Kann mir das Verhalten jemand erklären oder mir sagen wie man das korrekt löst? Meine einzige Idee wäre die border-color auf transparent zu setzen. Ist aber irgendwie unschön.

Ist aber eine der empfohlenen Möglichkeiten. Eine andere wäre, bei einem der beteiligten Elemente von margin auf padding auszuweichen, wenn das vom Layout her möglich ist.

Ciao,
 Martin

[Bla]

ohne das Beispiel in jedem Detail verstanden zu haben, vermute ich mal, dass es sich hier um den Effekt von Collapsing Margins handelt

OK, das ist schon mal ein Begriff der mir weiterhilft.

Ist aber eine der empfohlenen Möglichkeiten.

Na wenn es sogar eine der empfohlenen Möglichkeit ist, kann ich es ja so machen wie ich es schon versucht habe. Sehr schön ;-)

Danke!