nicht angemeldet
Hallo,
ich habe folgendes Problem:
Ich möchte eine Seite gestalten, die eine feste Breite hat, die Höhe soll sich entsprechend dem Browserfenster anpassen.
Der obere Header soll eine feste Höhe bekommen, der mittler Content Bereich soll 100% in der Höhe des Browserfensters einnehmen und der Fußbereich soll ebenso eine Feste Höhe erhalten.
Soweit habe ich das schon hinbekommen bis auf den IE 6. In dem mittleren Inhaltsbereich sollen wiederum 2 Bereiche entstehen, ein linker Block mit einer festen Breite und einer Hintergrundfarbe und ein rechter Block der die restliche zur Verfügung stehende Breite einnehmen soll und ebenfalls eine andere Hintergrundfarbe besitzen. Diese beiden Blöcke mit den Hintergrundfarben, sollen dann wiederum 100% der Höhe des Browserfensters einnehmen.
Das klappt aber nicht, weder im Firefox noch im IE.
Hier der Quelltext:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style>
*{
padding:0;
margin:0;
border:0;
}
html, body {
height: 100%;
color:black;
background:white;
text-align:left;
font-family: Verdana, Arial, sans-serif;
font-size: 0.8em;
}
#header{
padding:0px;
height:300px;
float: left;
}
#header_menu{
text-align: right;
background-color:#BDD370;
height: 300px;
float: none;
}
p {
margin: 0;
padding: 1em 0;
line-height: 1.5em;
}
#box{
width:800px;
margin:0 0;
text-align:left;
position: relative;
min-height: 100%;
height:auto !important;/* moderne Browser */
height:100%; /* IE */
background:#ffffff;
}
#content_left{
margin: 0px;
background-color:#DADADA;
float: left;
width: 200px;
min-height: 100%;
height:auto !important;/* moderne Browser */
height:100%; /* IE */
}
#content_right{
margin: 0px;
width: 600px;
background-color:#F8F8F8;
min-height: 100%;
height:auto !important;/* moderne Browser */
height:100%; /* IE */
}
#footer {
width: 100%;
background: #ffffff;
position: absolute;
bottom: 0;
height: 10px;
}
</style>
</head>
<body>
<div id="box">
<div id="header"><img src="top_test.jpg" /></div>
<div id="header_menu">AGB Übersicht</div>
<div id="content_left">Beispielnavigation</div>
<div id="content_right">Inhalt-Test</div>
<p id="footer">Footer</p>
</div>
</body>
</html>
Wer kann mir den Fehler sagen.
Gruss
Thomas