Schlafbaer87: 3-spaltiges, dynamisches Div-Layout

Beitrag lesen

Hallo Leute,

und zwar habe ich das Problem, dass ich gerne ein 3-spaltiges Div-Layout aufbauen möchte, wo es oben einen Header gibt, darunter 3 nebeneinander liegende Divs (Menü links, Content, Menü rechts) und darunter einen Footer.

Das ganze habe ich wie folgt aufgebaut:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
	<title>test</title>  
	  
	<style type="text/css">  
		.left{  
			border:1px solid orange;  
			text-align:center;  
			width:200px;  
			height:100%;  
			float:left;  
		}  
		  
		.right{  
			border:1px solid red;  
			text-align:center;  
			width:200px;  
			height:100%;  
			float:right;  
		}  
		  
		.middle{  
			border:1px solid blue;  
			text-align:center;  
			float:left;  
			width:550px;  
			height:100%;  
		}  
		  
		.clear{ clear:both; }  
	</style>  
</head>  
<body>  
  
	<div id="rootDiv" style="width:990px;">  
		<div id="header" style="border:1px solid brown; text-align:center; width:100%;">Bild</div>  
		  
		<div id="inhalt" style="height:200px;">  
			<div class="left">Links</div>  
			<div class="middle">Mitte</div>  
			<div class="right">Rechts</div>  
			<div class="clear"></div>  
		</div>  
		<div id="footer" style="border:1px solid grey; text-align:center; width:100%;">Footer</div>  
	</div>  
  
</body>  
</html>

Aber das funktioniert irgendwie nicht richtig. :(

1.) Wie bekomme ich das mittlere Div dazu, dass es sich an die Breite bis zum rechten Menü anpasst ?
2.) Wie kann ich es bewerkstelligen, dass sich die 3 inneren Divs immer gegenseitig an die Höhe anpassen ? Also wenn im mittleren Div viel Text steht, dann sollen sich die beiden Menüs auch an dessen Höhe orientieren und umgekehrt natürlich auch, wobei diese 3 inneren Divs auch eine Mindesthöhe besitzen sollten. Darüber hinaus soll dann die Länge des längsten Textes entscheiden wie hoch die drei Divs zu sein haben. Geht sowas ?

Vielen Dank für eure Hilfe.