Moin,
Der Validator sagt dazu:"
end tag for "head" which is not finished"
Wenn du weiter liest stehen dort noch ein paar Hinweise. In diesem liegt es daran, dass dein <head>-Element kein <title>-Element enthält. <head> *muss* als erstes ein <title>-Element enthalten. Korrekt wäre es also so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
<!--
body{padding:0;margin:0;}
#main{background-color:#C9D6A3;width:100%;}
#left{background-color:red;width:200px;height:500px;float:left;}
#right{background-color:yellow;height:500px;float:left;border:2px solid #000000;}
#c{clear:both;}
-->
</style>
</head>
Wie du sehen kannst, habe ich auch die XML-Deklaration entfernt. Diese schaltet den IE in den Quirksmodus, wodurch sich die unterschiedliche Darstellung zum Teil erklärt.
Die nächste Frage bezieht sich auf die Darstellung, welche ist richtig die im IE oder die im FF?
Die Darstellung im Firefox ist normalerweise immer die richtige, zumindest entspricht sie fast immer mehr dem Standard als die IE-Darstellung.
Falls die im FF richtig sein sollte, was muss ich tun um die IE-Darstellung
auch im FF zu erhalten?
Das wird schwierig. Der umgekehrte Weg ist normalerweise erheblich einfacher. Erstelle deine Seite, teste nur mit Firefox (oder einem anderen, brauchbaren Browser wie Opera, Safari, Konquerer...). Das schau dir an was der IE falsch macht, und such dir die entsprechenden Hacks für den IE raus und binde Sie ein (z.B. über Conditional Comments). Zu diesen Problemen solltest du im Netz genug Material finden.
Im SelfHTML-Weblog gibt es auch einen guten Artikel zu Spaltendesign mit CSS: Grundlagen für Spaltenlayout mit CSS
Gruß
Stareagle