[CSS] verhindern, dass DIV umbricht

[Thorben77]

Zitat von Meflin:

er interpretiert den Abstand zwischen left und main Teil falsch, genauergesagt er klebt beides einfach nebeneinander ohne den margin von 10 zu beachten, während in allen anderen Browsern alles passt.

Der IE scheint die zweite Margin-Angabe anzuwenden, die anderen Browser ignorieren die wohl.

Code:

margin: 10px; // den Wert nehmen die anderen Browser für Margin-Left
margin-left: 0px; // und den der IE

Nimm mal das "float:left" beim Main-Block weg, das ist überflüssig.

Code:

margin: 10px;
margin-left: 0px;

Das solltest Du zu einer Angabe zusammenfassen:

Code:

margin:10px 10px 10px 0px;

Der erste ist der Margin-Wert für obern, der zweite für rechts, der dritte für unten und der vierte für links.
Also kannst Du auch schreiben:

Code:

margin-top:10px;
margin-right10px;
margin-bottom:10px;
margin-left:0px;

Und die Lösung für Dein Problem sollte das hier sein:

Code:

#left {
   margin: 10px;
   width: 180px;
   float: left;
}

#main {
   width: 787px;
   margin:10px 10px 10px 200px;
}

Der Margin-Left-Wert des Main-Blocks sollte so groß sein, wie 1 mal die Breite des linken Blocks plus 2 mal den Margin-Wert des linken Blocks plus den Abstand, den er zum linken Block haben soll (sind hier 10 Pixel).

MfG

Edit:

Zitat von Meflin:

2 mal die Breite des linken Blocks??

Stimmt, vertippt, einmal reicht .