Layout-Probleme mit IE6, IE8 und Opera

[molily]

Der margin-left des Inhalts wird nicht vom Eltern-div aus berechnet, sondern von der Sidebar aus. Deswegen entsteht zwischen Sidebar und Inhalt eine große Lücke (Bild).

Das ist tatsächlich ein Bug, der darauf beruht, dass die CSS-2.1-Spec das einige Zeit so erlaubte. Beide Spalten verhalten sich als Block Formatting Context, einmal wegen float, einmal wegen overflow:auto. In CSS ist definiert, dass sich die Margin-Box eines BFC mit einem Float überlappen darf. Das heißt, der Margin müsste hinter dem Float verschwinden und von der linken Kante des Elternelements ausgehen, anstatt von der rechten Kante des Floats. (Quelle: Chao/Rudel: Fortgeschrittene CSS-Techniken. S. 259)

Da kannst du im Grunde nur Workarounds verwenden:

• overflow:auto weglassen, sodass der Content-Bereich kein BFC mehr ist, weiterhin margin-left benutzen und das ggf. nötige Einschließen der Floats mit dem klassischen Clearfix bewerkstelligen
• BFC mittels overflow:auto belassen (sodass keine Überlappung der Border-Boxen stattfindet), aber dem dem Float stattdessen ein entsprechend kleines margin-right geben. Oder diesen Abstand über padding-left vom Inhaltsbereich lösen.

Mathias