Michael Borschel: Fehlender automatischer Textumbruch innerhalb von float:left

Beitrag lesen

Hallo,
ich komme mit einem Problem nicht weiter und hoffe auf eure Hilfe. Ich habe ein dreispaltiges Layout, bei dem der Text in der mittleren Spalte nicht umgebrochen wird und daher der komplette div-Container verschoben wird. Ich habe ein kurzes Beispiel geschrieben, das das Problem darstellt:

  
html>  
<head>  
 <title>Testseite</title>  
</head>  
<body style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px; ">  
 <div style="width: 575px; height: 214px; color: black; background-color: #dddddd; ">  
  <div style="float: left; background-color: #777777; ">  
   YYYYYYYYY  
  </div>  
  <div style="float: left; padding-left: 10px; padding-right: 10px; background-color: #aaaaaa; ">  
   <div>  
    UEBERSCHRIFT UEBERSCHRIFT UEBERSCHRIFT<!--<br>-->  
    UEBERSCHRIFT UEBERSCHRIFT UEBERSCHRIFT  
   </div>  
   <div>  
    Text Text Text Text Text Text Text<!--<br>-->  
    Text Text Text Text Text Text Text  
   </div>  
  </div>  
  <div style="float: right; background-color: #999999; ">  
   XXXXXXX  
  </div>  
 </div>  
  
</body>  
</html>  
  

Wenn ich die zwei <br>s entkommentiere, sieht es so aus wie ich will.
Ich habe auch schon versucht, den mittleren Teil ohne float ans Ende zu stellen, dann wird aber das Padding nicht richtig berücksichtigt (geht vom ganz linken Rand aus, nicht vom rechten Rand des ersten divs) und der Text fliesst auch unterhalb der anderen Container.
Ich kann für die inneren Elemente leider auch keine festen Höhen und Breiten angeben, da alle Elemente aus einer Datenbank kommen und rechts und links eigentlich Bilder dargestellt werden, die keine feste Breite haben. Auch das feste Formatieren des Textes in der Mitte geht daher leider nicht.
Das ganze soll übrigens als Teaser in ein größeres Layout eingebaut werden.

Vielen Dank für eure Hilfe.