Problem mit float im IE

[Ulrich]

Moin,

Eine Beispielseite habe ich hier online:
http://um-fritz.de/examples/test.html
(Bitte entschuldigt die Unannehmlichkeit, aber ich möchte diese Seite nicht verlinken.)

Auf dieser Seite kann man folgendes Problem im IE(6) feststellen, welches schwer zu beschreiben ist, aber im Beispiel schnell klar wird:

Der äußere Container (2px schwarzer Rand) umspannt drei weitere Container: Header (blauer Rand), Inhalt (roter Rand) und Footer (grüner Rand).
Der schwarze Block steht für das Menü, dass im Inhaltscontainer rechts floatet.
Darunter eine Definitionsliste mit drei Listenpunkten. Diese floaten links und sind mir den Dimensionen 100*200px definiert.
Darunter ein Absatz mit clear:both;
Zieht man das Fenster so breit auf, dass alle drei gelben Rechtecke in einer Linie sind, sollten die rechten Ränder (farbig und schwarz) bündig aneinander liegen. Verschmälert man nun das Fenster, sollten die gelben Rechtecke untereinander "wegfloaten" wobei die rechten Ränder trotzdem bündig aneinander bleiben.
Das ist im Firefox auch der Fall.
Im IE6 (7 auch?) dagegen wird erst der äußere Container erweitert, bis sogar ein horizontaler Scrollbalken erfolgt.
Erst nachdem das rechte gelbe Rechteck nach unten umgebrochen wurde, liegen die Ränder rechts wieder bündig und der horizontale Scrollbalken verschwindet.

Wie ist es möglich auch im IE zu erreichen, dass wie im FF der umgebende äußere Container nicht erweitert wird, sondern die Floats vorher umbrechen?
Mir fehlen im Moment jegliche Lösungsansätze noch Ideen nach welchem Bug ich suchen müsste. Auf eine Tabelle möche ich auch nicht ausweichen müssen. Für einen Vorschlag wäre ich wirlich dankbar.

mit freundlichen Grüßen
Ulrich