chris: innerhalb einer Box floten und der Box 100% Höhe zuweisen

Beitrag lesen

Hallo!
Kurze Beschreibung meines Problems:

Ich habe ein auf Floats basierendes Seitenlayout . Dreispaltig mit darüberliegendem Header. Das Ganze ist komplett zentriert.

Allerdings - bedingt durch die Float-Angaben in #right #left und #content, wird width:100%; aus #page nicht beachtet.
Das sieht milde gesagt, scheisse aus.

Hier mal der Code, in der Hoffnung das Ihr eine Lösung für mich habt. Danke!

<html>  
  
<head>  
  
<title>titel</title>  
  
<link rel="stylesheet" type="text/css" media="screen" href="style.css">  
  
</head>  
  
<body>  
  
<div id="page">  
  
<div id="head"></div>  
  
<div class="navi" id="left">  
  
<br />  
  
<br />  
  
<br />  
  
<br />  
  
</div>  
  
<div id="content_area">  
  
<h1>Lorem ipsum dolor sit amet</h1>  
  
consetetur sadipscing elitr,  
  
sed diam nonumy eirmod tempor invidunt ut labore  
  
et dolore magna aliquyam erat, sed diam voluptua.  
  
</div>  
  
<div class="navi" id="right">  
  
<br />  
  
<br />  
  
<br />  
  
<br />  
  
</div>  
  
<div class="footer"></div>  
<div class="clear"></div>  
  
</div>  
  
</body>  
  
</html>
  
#page {  
  
    width:800px;  
  
    height:100% !important;  
  
    margin:auto;  
  
    border:solid 1px black;  
  
}  
  
  
  
#head {  
  
    background-image:url("bild.jpg");  
  
    height:205px;  
  
}  
  
  
  
#left {  
  
    float:left;  
  
border:solid 1px black;  
  
}  
  
  
  
#right {  
  
    float:right;  
  
border:solid 1px black;  
  
}  
  
  
  
#content_area {  
  
    width:598px;  
  
    float:left;  
  
border:solid 1px black;  
  
}  
  
  
  
.navi {  
  
    width:130px;  
  
    overflow:hidden;  
  
}  
.clear {  
 clear:both;  
}