c--: 2 Divs zusammen 100% hoch - erstes Div mit absoluter Höhe

Beitrag lesen

Hallo,

ich möchte 3 Divs so aufteilen, dass das erste oben 100% der Breite in Anspruch nimmt, aber eine absolute Höhe. Die zwei weiteren Divs sollen darunter den übrigen Platz in Anspruch nehmen, sodass alle drei zusammen das Browserfenster maximal ausnutzen.
Mit float:left und einer absoluten Breitenangabe kann ich das untere linke Div (div2) wunderbar ausrichten, sodass das untere rechte Div (div3) (ohne Breitenangabe) die übrige Breite verwendet.
Genau das gleiche möchte ich mit der Höhe machen - das obere Div (div1) soll sozusagen "float:top" sein, die unteren beiden also den vollen übrigen Platz darunter ausnutzen. Eine Höhe von 100% kann ich denen ja nicht geben, da von den 100% die absolute Höhe des oberen Div (div1) abgezogen werden soll.

Wie kann ich also die div2 und div3 die volle freie Höhe nutzen lassen?

Hier mal ein Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
<head>  
<title>test</title>  
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1;">  
</head>  
<body>  
  
<div id="div1" style="background-color:#FF0000; height:100px;">  
oberes div - maximale breite und absolute höhe  
</div>  
  
<div id="div2" style="width:200px; background-color:#00FF00; float:left;">  
absolute breite - soll aber die gesamte freie höhe unter div1 ausnutzen  
</div>  
  
<div id="div3" style="background-color:#0000FF; color:#FFFFFF;">  
soll genauso hoch sein wie div2  
</div>  
  
</body>  
</html>