Div / Float Probleme bei Firefox :(

[Andreas]

Ich weiß nicht mehr weiter und versuche jetzt seit drei Stunden eine Lösung zu finden...

Ich habe ein einfaches zweispaltiges Layout mit CSS positioniert, aber irgendwie funktioniert da etwas nicht... 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. Das ganze ist natürlich scheiße, weil damit sämtliche padding und margin-Befehle auf der Seite zum Float-Bereich nicht mehr vernünftig funktionieren (der Inhalt "klebt" am Float-Bereich).
Wenn ich für den content "overflow=auto" (bei hidden z.B. gehts nicht) notiere, tritt der Fehler nicht auf. Beim IE gibts auch keine Probleme.

div#navi {
  padding: 25px 0px 0px 15px;
  float:left;
  width: 200px;
  height: 99.9%;
  background-color: #EFEFFF;
}
div#content {
  text-align: justify;
  padding: 25px 100px 0px 0px;
  height: 99.8%;
}

--------------------------

<div id="navi">
...Navigation
</div>
<div id="content">
...Inhalt und andere Div-Bereiche
</div>

[Febraham]

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").