Problem beim Webseitenlayout mit DIVs und CSS

[Toco]

Hallo,

ich möchte ein Design mit Hilfe von DIV Elementen erstellen, nur leider komme ich bei einem Problem nicht weiter.

Hier mal die HTML:

  
<div id="root">  
  
<div id="header"></div>  
  
<div id="container">  
<div id="leftbar"></div>  
<div id="navi"></div>  
<div id="middlebar"></div>  
<div id="content">Blub</div>  
<div id="rightbar"></div>  
</div>  
  
<div id="footer"></div>  
  
</div>  

Ist ein recht einfaches layout: Das root DIV soll alles umhüllen.
Dann kommen drei Elemente header, container, footer untereinander.

Innerhalb des Containers sollen 5 Div-Elemente nebeneinander stehen.
Hier mal die CSS meiner ersten Versuche.

  
#root {  
width: 1024px;  
margin: 0px auto;  
}  
  
#header {  
width: 1024px;  
height: 163px;  
background-image: url("/img/red/header.png");  
}  
  
#container {  
width: 1024px;  
}  
  
#leftbar {  
height: 100%;  
width: 21px;  
float: left;  
background-image: url("/img/red/leftbar.png");  
}  
  
#navi {  
width: 163px;  
height: 100%;  
float: left;  
}  
  
#middlebar {  
width: 45px;  
height: 100%;  
float: left;  
background-image: url("/img/red/middlebar.png");  
}  
  
#content {  
width: 780px;  
height: 100%;  
float: left;  
}  
  
#rightbar {  
width: 15px;  
height: 100%;  
float: left;  
background-image: url("/img/red/rightbar.png");  
}  
  
#footer {  
width: 1024px;  
height: 11px;  
background-image: url("/img/red/foot.png");  
}  

Wenn ich im Container eine Höhe angebe funktioniert es, doch das ganze soll je nach Inhalt nach unten wachsen, und alle 5 divs sollen den container in der Höhe komplett ausfüllen.

Ich hoffe jemand kann mir dabei helfen. Danke

Gruß,
Toco