nicht angemeldet
Bei Firefox verhalten sich alle div-Layer des Contents (also sowohl der Content selber als auch sämtliche anderen div-Bereiche) gegenüber dem Float-Bereich wie absolut positionierte Elemente, die sich bekanntermaßen ja auch überlappen können.
Allerdings verhält sich nur der Div-Bereich selber so, sein Inhalt umfließt den gefloateten Bereich wie geplant.
Wenn Du mal in den CSS-Standard, Abteilung Floats, schaust, wirst Du feststellen, dass das Verhalten so völlig korrekt ist und, angesichts des zweiten Beispiels, auch so sein muss. Wäre das nicht der Fall, würde der zweite Absatz zum linken Rand hin eine Lücke lassen, nämlich in der Breite, die in den ersten paar Zeilen das Bild aus dem vorigen Absatz noch beanspruchte.
Beim IE gibts auch keine Probleme.
Er macht es für Dich in diesem Fall (siehe Beispiel oben) vielleicht bequemer, aber trotzdem falsch.
Gebe dem content-<div> einen Außenabstand (hier: margin-left) in Breite des navi-<div>s und platziere alle nachfolgenden Elemente innerhalb des content-<div>s, um den Abstand zu halten. Alternativ könntest Du eventuell die beiden Spalten auch gleich absolut positionieren und auf float verzichten.
Und nicht zuletzt, da Du width und padding nutzt, wirst Du darüber hinaus in den standardkonformen Modus schalten müssen, um nicht über weitere Fehler in der CSS-Umsetzung des IE (!) zu stolpern. Standards sind dazu da, genau solche Probleme, wie Du sie gerade hast (unterschiedliches Verhalten bei unterschiedlichen Produkten), zu vermeiden. Es müssen sich allerdings auch alle dran halten (und nicht "alle außer Microsoft").