CSS float clearen

Die Seite ist wie folgt aufgebaut.

Header

Navi (float left) daneben Main

Footer (clear both)

klappt soweit ganz gut

Nun möchte ich im Main-Bereich ein Bild mit Text daneben einbauen.
Also hab ich das Bild (float:left) gemacht und der Text kommt auch daneben.
Darunter soll dann ein <hr> erscheinen, also habe ich vor der <hr> ein <br style="clear: both;"> eingebaut.

Leider erscheint nun die <hr> nicht direkt unter dem Bild, sondern erst da, wo die Navi (die ja auch gefloatet ist) aufhört.

Wie kann ich das wie gewünscht umsetzen?

Eigentlich ne gute Idee, aber nicht so ganz die Lösung.

Hab mich aber auch etwas ungenau ausgedrückt.

Also es handelt sich um eine Buchbeschreibung. Links soll also das Bild hin und Beschreibung rechts daneben und falls sie lang genug ist, auch unter dem Bild weiter.

Auf jeden Fall soll dann die ISBN-Nr und der Preis unter dem Bild stehen, also auch wenn die Beschreibung kürzer ist. Danach kommt erst die <hr>.

Darunter kommen noch weitere Bücher, wo es dann immer wie gewüscht klappt, da die Navi dann nicht mehr stört.