Sera: Float und resultierende Gesamtbreite (IE vs Firefox)

Beitrag lesen

Hallo allerseits!

Ich möchte gerne eine Website mit 2 getrennten Bereichen erstellen:

1. ganz links: eine Navigationsleiste
2. zentriert: den eigentlichen Seiteninhalt

Meiner Überlegung nach sollte sich dies recht einfach mittels eines "float:left" div-Blocks und eines anschließenden mit "margin:auto" div-Blocks realisieren lassen.

Klappt wunderbar bei Firefox, jedoch beim IE (V6 & V7) schaut die Sache leider ander aus. Dieser nimmt nämlich scheinbar nicht die Mitte des Gesamtbildschirms sondern die Mitte des noch verfügbaren Platzes, was natürlich zu einem gänzlich anderem Layout führt.

Hier ein kurzes Beispiel zur Verdeutlichung:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">

div#content {
  text-align:center;
 }

div#sidebar {
  float:left;
  width:24%;
  margin: 0px;
  padding: 0px;
  border:medium solid FF0000;
 }

div#text {
  width:50%;
  margin:auto;
  border:medium solid FF0000;
 }
</style>
</head>

<body>
<div id="content">
 <div id="sidebar">
  Ein links floatender Bereich<br>
  24% der Gesamtbreite
 </div>
 <div id="text">
  <p>Ein mittig ausgerichteter Textblock<br>
  50% der Gesamtbreite</p>
  <p>... aber nicht im IE ???</p>
 </div>
</div>
</body>
</html>

So wer macht jetzt was falsch?
Ich, in meinem Verständnis von "floats" und "margin:auto"?
Oder einer der beiden browser (IE bzw. Firefox)?

Und am wichtigsten von allem:

Kann ich den Fehler beheben und wenn ja wie?

Mit freundlichen Grüßen und Dank im Voraus,
Sera

P.S.: Ich hab natürlich schon versucht im Internet bzgl. dieses Problems was zu finden, aber leider das eigentliche Kernproblem offenbar nicht richtig spezifizieren können und bin deshalb auch wohl nicht fündig geworden. Aus dem gleichen Grund ist auch wohl der Threadtitel nicht ganz glücklich gewählt.