Peter: Problem mit Grundlayout

Beitrag lesen

Hallo,

mein folgendes Problem ist sicherlich schon des öffteren vorgestellt worden. Allerdings würde ich gerne wissen was ich genau falsch mache bzw. wie ich es besser machen könnte. Quasi bräuchte ich mal einen der mir über die Schulter schauen könnte.

Mein Grundlayout sieht folgendermaßen aus:

header(oben)
navigation(links)
content(rechts/mitte)
footer(unten)

Problem:
je nach größe des Inhaltes der Content-Box soll diese sich auch nach unten hin vergrößern. Funkiert soweit im IE -wobei ich es gerne hätte das sich mit der Content-box auch die Nav-Box mit nach unten vergrößert- der Firefox macht es nicht! Hoffe man versteht mein Problem einigermaßen.

Hier mein code:
index.php

  
<?php echo "<?xml version=\"1.0\" encoding=\"ISO-8859-1\" ?>\n"; ?>  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<title></title>  
<link rel="STYLESHEET" type="text/css" href="styles.css" />  
</head>  
<body>  
  <div class="center">  
    <div class="header">header</div>  
    <div class="nav">nav</div>  
    <div class="content">  
      content<br><br>  
      <?php  
        for($i=0;$i<10;$i++)  
          echo 'test<br>';  
      ?>  
    </div>  
    <div class="footer">footer</div>  
  </div>  
  <div align="center">blabla</div>  
</body>  
</html>  

styles.css

  
body {  
  text-align: center;  
}  
.center {  
  width:900px;  
  margin:0px auto;  
  text-align:left;  
}  
.header {  
  height:150px;  
  background-color: #c3c3c3;  
}  
.nav {  
  float:left;  
  width:150px;  
  height:100px;  
  background-color:red;  
}  
.content {  
  float:right;  
  width:750px;  
  height:100px;  
  background-color:yellow;  
}  
.footer {  
  clear:left;  
  width:900px;  
  height:50px;  
  background-color:blue;  
}  

danke schon mal...

PS: leider habe ich noch keine Möglichkeit es hoch zu laden, da noch kein Webspace.

LG
Peter