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

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;  
}
  1. Das Ganze ist komplett zentriert.

    ja, durch ein unsinniges element, wo du doch body auch verwenden könntest ...

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

    welches width:100%; ?!

    #page {
        width:800px;
        height:100% !important;
        margin:auto;
        border:solid 1px black;
    }

    im übrigen solltest du weniger überflüssige leerzeilen verwenden ;)

    1. Das Ganze ist komplett zentriert.
      ja, durch ein unsinniges element, wo du doch body auch verwenden könntest ...

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

      welches width:100%; ?!

      #page {
          width:800px;
          height:100% !important;
          margin:auto;
          border:solid 1px black;
      }

      im übrigen solltest du weniger überflüssige leerzeilen verwenden ;)

      Tut mir leid, in der Erklärung habe ich das !important; vergessen.
      Aber auch wenn ich den #page-Block weg lasse und als umschliessendes Element body nehme, ersteckt sich die Seite ohne dass ein entsprechend großen Inhalt nicht über die vollen vertikalen 100% (height:100% important;) :/

      Danke für den Hinweis bezgl. unsinniges #page :)

      1. Element body nehme, ersteckt sich die Seite ohne dass ein entsprechend großen Inhalt nicht über die vollen vertikalen 100% (height:100% important;) :/

        eh klar, body und html haben da auch noch ein wörtchen mitzureden :)

        1. Element body nehme, ersteckt sich die Seite ohne dass ein entsprechend großen Inhalt nicht über die vollen vertikalen 100% (height:100% important;) :/

          eh klar, body und html haben da auch noch ein wörtchen mitzureden :)

          und was sollte ich Deiner Meinung nach machen, um die Ausdehnung auf 100% zu erreichen?

          auch wenn height:100%; body zugewiesen wird, klappts nicht :@

          1. auch wenn height:100%; body zugewiesen wird, klappts nicht :@

            drum sagte ich ja, dass body UND html etwas dagegen haben