Rolando: Problem mit Layout Umsetzung!? (Gefloatete Divs align bottom!?)

Beitrag lesen

Hallo zusammen

Habe ein Layoutproblem und krige es einfach nicht hin!
Ich soll folgendes Layout umsetzen:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<title>Unbenanntes Dokument</title>  
</head>  
  
<style>  
#box {width:600px}  
#left {float:left; width:300px; background-color:red;}  
#inner{}  
#right{float:right; width:300px; background-color:green;}  
.clearer {width:0px; height:0px; clear:both;}  
</style>  
  
<body>  
<div id="box">  
  <div id="left">  
    <!-- "Mein Text" soll ganz unten sein, d.h. auf höhe des letzten "Bla"-->  
	<div id="inner">Mein Text</div>  
  </div>  
  <div id="right">  
	  Varabler Content<br />  
      Bla <br />bla <br />  
      bla <br />bla <br />  
      bla <br />bla <br />  
      bla <br />bla <br />  
  </div>  
  <div class="clearer">&nbsp;</div>  
</div>  
</body>  
</html>  

Das Ziel wäre nun, das <div id="left"> genau so hoch ist, wie der dynamische Inhalt des <div id="right">!?
Und das <div id="inner"> sollte immer ganz unten im <div id="left"> sein!
D.h. auf der selben Zeile wie das letzte "bla"!!
Kann mir bitte jemand weiterhelfen? Versusche es seit Stunden habe gegoogelt, in diversen Foren gesucht und vieles versucht, aber schaffe es einfach nicht! Bin kurz vorm Verzweifeln!!

Merci für Hilfe.