CSS-Layout, feststehender Header & Footer

[Lutz]

Hallo Forum,

habe ein Problem bei der Umsetzung eines CSS-Layouts. Grundlage ist der Beitrag aus Tipps & Tricks, Feststehende Footer von Dennis Riehle (http://aktuell.de.selfhtml.org/tippstricks/css/footer/beispiel6.htm).

Ich versuche gerade das Layout dahingehend zu ändern, dass es bei mir vier Rechtecke geben soll (http://people.freenet.de/monoteam/).

Mein derzeitiges Ergebnis funktioniert im Mozilla und im IE6.x bei voller Bildschirmgröße. Wenn ich den Bildschirm kleiner ziehe, verändert sich im IE die Breite des Contentbereich im Verhältnis zum Kopfbereich, was so nicht sein soll (siehe rechter Rand).

Sorry, da mir jetzt unklar ist an welcher Stelle ich den Fehler mache, kann ich nur mal den Bereich der Rechteckformatierung aus meinem Style und den HTML-Teil anbieten.

Danke
Lutz

CSS

body{ position:absolute; background:#666666 }

html, body{ top:0px; left:0px; right:0px; min-height:100%; margin:0; padding:0; width:100% }

#header_container{ position:fixed; top:0px; left:0px; right:0px; margin:0; padding:0; height:195px; z-index:3; }
#header{ position:absolute;  top:0; left:0; right:0; bottom:0; background:#666666; margin:0; padding:0; z-index:3;  }
#top{ position:absolute; top:15px; left:275px; right:20px; bottom:0; height:170px; background-color:#D0D7DD; z-index:3; }
#content_container{ top:0px; left:0px; right:0px; margin:0; padding:0; z-index:2; }
#content{ position:absolute; min-height:95%; top:195px; left:0; right:0; background:#666666; z-index:2;  margin:0; padding:0; }
#content_field{ position:absolute; margin:0; left:275px; right:20px; min-height:95%; background-color:#E7E8E8; }

/* Nun für den MSIE */
* html, * html body{ overflow:hidden;  bottom:0; height:100%; }

* html #header_container{  position:absolute; width:100%; padding-right:20px; }
* html #header { height:100%; position:static; }
* html #top{ padding-right:100%; }

* html #content_container{ position:absolute; top:0; bottom:0; left:0; right:0; width:100%; height:100%;  overflow:auto; padding: 0; margin:0; z-index:2; }
* html #content{ width:100%; height:100%; padding: 0; margin:0; z-index:2; }
* html #content_field{ margin:0; padding:0; height:100%; }

HTML
<div id="header_container">
<div id="header">
  <div id="logo"></div><div id="top"></div> <div id="cont_top"></div>
 </div>
</div>
<div id="menu"></div>
<div id="content_container">
 <div id="content"><div id="content_field"></div></div>
</div>