Problem mit zweispaltigem Layout

[suit]

Sobald das Menü (also das div mit dem float:left) höher ist, als die rechte Spalte, ragt das Menü über den Rahmen des Divs hinaus, statt es zu vergrößern.

Works as designed.

Das Problem tritt im Firefox auf, im Internet Explorer funktioniert es (öfter mal was neues...).

Nein, der IE macht es falsch.

Gibt es eine Lösung oder ein Workaround hierfür?

Für funktionierendes Verhalten braucht es keinen Workaround. Für deine Erwartungshaltung aber schon.

• Füge nach dem umgebenden gemeinsamen Element der beiden Spalten ein Pseudoelement ein (:after).

• Erzeuge in diesem als Inhalt ein unsichtbares Zeichen, z.B. ein geschütztes Leerzeichen (U+0000) mit der content-Eigenschaft.

• Stelle es als Block-Element dar (display-Eigenschaft).

• Die Breite auf 100% gestellt (width)

• Die Höhe auf 0 (height)

• es stellt den Textfluss mittels clear wieder her

• und zusätzlich gibts noch ein overflow: hidden; damit das Ding auf jedenfalls keinen Platz einnimmt.

Sollte in jedem modernen Browser den gewünschen Effekt liefern und der IE machts ohnehin falsch und dort passts dann auch.

Diese Technik nennt sich übrigens "clearfix"

alternativ nimmt man statt dem geschützen Leerzeichen irgend ein anderes Zeichen und stellt die visibility auf "hidden".