Layout-Umsetzung

[swado]

Guten Morgen,

ich möchte ein Layout, das in etwa so aussieht:

________  ____________ _____
|        ||            |     |
| INHALT ||   Float 1  |     |
|        ||____________|     |
|        ||         |        |
|        ||         |        |
|        || Float 2 |        |
|        ||         |        |
|        ||_________|        |
|        ||                  |
|________||__________________|

Länge von Inhalt und Anzahl der Float-Boxen (mal SpalteR genannt )ist dynamisch.
Die Breite von SpalteR soll sich dynamisch nach der breitesten gefloateten Box richten, die Boxen sollen jeweils linksbündig ausgerichtet sein.
Die Border ganz rechts soll immer über die ganze Höhe gehen, also entweder über die Höhe von INAHLT oder über die Höhe von den Float-Boxen.
Die Breite von INHAL richtet sich dynamisch ein (mit min- und max-width Werten versehen).
Die Float-Boxen sollen bei zu wenig Platz oberhalb des INHALTs angezeigt werden.
Diese möchte ich jetzt möglichst sauber umsetzten, und auch irgendwie für IE funktionierend machen.

Mein Entwurf sieht wie folgt aus:
<div id="container">
<div id="float1"></div>
<div id="inhalt"></div>
</div>

mit dem CSS:
div#container {
border-right: 1px solid #000;
max-width: 60em;
min-width: 20em;
overflow: hidden;
width: 70%;
}
div#float1 {
float: right;
overflow: hidden;
}
div#float2 {
clear: both;
float: right;
}
div#inhalt {
overflow: hidden;
}

Soweit so gut.
Border auf der rechten Seite hat immer die volle Höhe: ok.
Float-Boxen sind rechtsbündig angeordnet: Float2 ist breiter und schiebt sich einfach nach Links in den INHALT: wie Abhilfe schaffen?
Sobald ich dem INHALT overflow: hidden; mitgebe werden die Float Boxen bei zu wenig Platz nicht mehr oberhalb von INHALT angezeigt entferne ich die Zeile erhalte ich gewünschten Effekt, habe aber keine "Spalte" mehr: kann man da was tun?

Des Weiteren Frage ich mich, ob ich irgendwo auf einen Div verzichten kann, oder das irgendwie anders lösen kann und wie ich das für IE dann umsetzen kann (noch garnicht getestet mit IE).

Vielleicht kann mir jemand helfen?
Danke schonmal

greetz
swado

[Edgar Ehritt]

Hallo Swado,

________  ____________ _____

||            |     |
INHALT ||   Float 1  |     |
       ||____________|     |
       ||         |        |
       ||         |        |
       || Float 2 |        |
       ||         |        |
       ||_________|        |
       ||                  |
|________||__________________|

#container {float:right;border-right:1px solid #000;margin-left:10px}  
#float1    {float:left}  
#float2    {float:left}  
#inhalt    {border-right:1px solid #000}

<div id="container">  
	<div id="float1">1</div>  
	<div id="float2">2</div>  
</div>  
<div id="inhalt">3</div>

Gruß aus Berlin!
eddi