Bei der Beschreibung der 'float'-Eigenschaft [CSS21 §9.5.1, CSS2@de §9.5.1] findest du diegenauen Regeln, die das Verhalten von Floats steuern. Interessant dürfte Nummer 5 sein. (Nummer 5?)
Auch auf die Gefahr hin, mich zu verzetteln (zumal mir das "in Worte fassen" grad schwer fällt): Mein Verständniss des float und clear ist (und daran haben die, trotzdem hilfreichen Links nichts geändert), dass wenn ich ein float-left Element und ein float-right Element habe, beide soweit oben wie möglich positioniert werden, und umfließender Text quasi in der Mitte durchläuft. Gibt es mehrere float-Elemente auf der selben Seite, reihen diese sich daneben (bzw. darunter) ein. Ein clear wirkt sich immer nur auf die entsprechende Seite aus. Nun direkt auf's Beispiel bezogen: Für die rechten Boxen ist nur float: right und clear: right gesetzt, also sollten alle float:left Elemente davon ja vollkommen unbeeindruckt sein.
Warum also richten aktuelle Browser das float: left Element trotzdem auf Höhe des letzten float: right Element aus, und nicht so hoch wie möglich (in dem Beispiel ist es direkt nach der Überschrift deklariert, also sollte es auch direkt nach der Überschrifft erscheinen).
Der Standard legt scheinbar nur fest, wie es sich für gleichseitige float Elemente verhält, nicht bei float:left Elementen und float:right Elementen in Kombination.
Ein umschließendes 'div' (in HTML5 auch gern 'aside' o.ä.) für die rechten Inhalte sollte doch eine Idee für eine Lösung sein.
Ja, aber dann nicht passt es im IE7 nicht mehr - ich bin kein Fan von Sonderlösungen für einzelne Kandidaten. Aber in diesem Fall geht es wohl nicht anders.
Und benenne Klassen nie nach ihrer derzeit gewünschten Darstellung! Also nicht "Left"/"Right".
Logo - aber in diesem Beispiel ist es genau dass was die Klassen ausdrücken sollten.
Grüße,
Julian