Andreas: DIV Layout - Rahmen verschieben sich

Beitrag lesen

Hallo zusammen,

Ich habe ein Problem mit einem CSS Layout. Und zwar hängt das ganze am content. Wenn dieser Inhalt bekommt wird er um den Inhalt größer. Und um genau die gleiche Größe wird foot_of_site nach unten verschoben.

Die Frage ist nun, wie kann ich ohne JavaScript diese Verhalten vermeiden?

  
<html>  
<head>  
<title>Layout</title>  
<style type="text/css">  
#whole_site {  
 position : absolute;  
 top   : 0px;  
 left  : 50%;  
 width  : 800px;  
 margin-left : -400px;  
 background-color: #ff0000;}  
  
#banner {  
    position: relative;  
    top: 0px;  
    left: 0px;  
    width: 800px;  
    height: 140px;  
    border-left: 0px;  
    border-top: 0px;  
    border-right: 0px;  
    background-color: #00ff00;}  
  
#content_of_site {  
    position: relative;  
    top: 0px;  
    left: 0px;  
    bottom: 0px;  
    width: 800px;  
    background-color: #00ffff;}  
  
#navigation{  
    position: relative;  
    top: 0px;  
    left: 0px;  
    width: 140px;  
    height: 300px;  
    background-color: #0000ff;}  
  
#content{  
    position: relative;  
    top: -300px;  
    left: 145px;  
    width: 655px;  
    padding-bottom: 0px;  
    background-color: #ff00ff;}  
  
#foot_of_site {  
position: relative;  
bottom: 0px;  
left: 0px;  
width: 800px;  
height: 100px;  
background-color: #ffff00;}  
</style>  
</head>  
<body>  
<div id="whole_site">  
    <div id="banner"></div>  
    <div id="content_of_site">  
        <div id="navigation"></div>  
        <div id="content">s<br>gs<br>gs<br>gs<br>gsgs<br>gs<br>g</div>  
    </div>  
    <div id="foot_of_site">fbdbyxvc<br>lih</div>  
</div>  
</body>  
</html>