Bild von Liste umfliessen lassen

[Alex73]

Hallo,

ich brauch mal eure Hilfe. Ich bin zur Zeit dabei meiner Website ein neues Design zu verpassen. Und wenn ich schon dabei bin, wollte ich auch den Code ein wenig verbessern. Derzeit hab ich Probleme mit folgender Seite.

Ich will also rechts drei Bilder haben und links davon Text, wobei der Text neben Bild 2 und 3 eigentlich eine Liste darstellt. Bisher hab ich das mit Tabellen recht unsauber gelöst. Soll man ja aber nicht. Also hab ich versucht mit float und Listen zu arbeiten. Das Ergebnis seht ihr hier Test. Ist natürlich nur ein Teil des Codes, aber das Problem ist sichtbar. Das umfliessen klappt also nur mit dem ersten Listeneintrag.

Das Problem konnte ich lösen, indem ich erst die beiden Listen erstellen lasse und zum Schluß die Divs mit den Bildern mit position:relative an den richtigen Ort schiebe. Sieht zwar gut aus, unschöner Nebeneffekt ist aber, dass ich dann am Ende der Webseite viel leeren Raum habe.

Also hab ich es mit position:absolute versucht. Der leere Raum ist dann zwar weg und die Bilder werden auch schön umflossen. Wenn ich aber im Firefox mit der Schriftgröße variere, verschieben sich die Bilder nicht analog zum Text. Das war bei position:relativ nicht der Fall. Jetzt bin ich mit meinem Latein am Ende. Hat jemand Tipps wie ich das Ganze sauber löse? Bin ich vielleicht auf dem ganz falschen Weg?

Danke und Grüße
Alex

hier noch der massgebliche Code der CSS

ul, li {  
margin: 0;  
padding: 0;  
}  
  
li.innen {  
   display: inline;  
   float: left;  
   width: 6%;  
   font: 1.1em  Verdana;  
   margin: 0 3em 1.5em 0;  
}  
  
li.aussen {  
   display: inline;  
   float: left;  
   width: 85%;  
   font: 1.1em  Verdana;  
   padding: 0;  
   margin: 0 0 1.5em 0;  
}  
  
li.clr {  
   display: inline;  
   margin: 0;  
   padding: 0;  
   width: 1px;  
 }  
  
br.clr {  
   clear: left;  
   width: 1px;  
   font-size:1px;  
   margin: 0;  
   padding: 0;  
   overflow:hidden;  
 }