Folgendes Layout ist die Grundlage:



Momentan ist das ganze mit festen Grössen der Boxen gelöst was aber, wie ich darauf hingewiesen wurde, nicht den Webstandards entspricht.

Darum möchte ich nun, dass jede dieser Boxen Variabel in der Höhe ist und sich somit jeglichem Inhalt anpasst.

Der Knackpunkt dabei ist, dass alle Boxen immer gleich hoch sind und dass bei den Boxen ganz rechts der Abstand zwischen .red und .green gleich gross wie zwischen den anderen Boxen ist.

Wer hat kann mir da helfen?


Meine bisherigen Überlegungen:
.6of12 und .3of12 blue in einem übergeordneten Div zusammenfassen und diesen Div wie ein Div EINER Box mit Runden Ecken und Variabler Höhe behandeln (Runde Ecken 2) Dann wären mal die 2 linken Boxen gleich hoch und in der Höhe Variabel weil man ja nur jeweils EIN BILD für BEIDE Boxen verwendet und sich dmit der Faux Columns Methode bedient.

.3of12 red und .3of12 green würde ich dann als eigenständige Boxen erstellen und mit float:right entsprechend positionierend.

Das Problem dabei: Die Summe der Höhen (inklusive zwischenraum) der beiden Boxen (3of12 red und 3of12 green) ist nicht gleich der höhe von .6of12 und .3of12 blue.

Eine andere Variante die ich Überlegt habe basiert darauf, dass man faux column für ALLE DREI SPALTEN anwendet und dann ein Image für Hx von .3of12 .green erstellt, welches aber auch die abschliessenden Runden Ecken von .3of12 .red enthält. Dieses Hintergrundbild würde dann über dem Hintergrundbild der Faux Column zu liegen kommen und es würde richtig aussehen.
Ein Bild das das verdeutlicht habe ich hier: http://img339.imageshack.us/img339/1...roblemvar2.jpg
Das Problem sehe ich in Dingen wie Zoom und sowas, habe Angst das es dann etwas verschiebt und alles total verwirrend wirkt.

Vielleicht habe ich ja etwas übersehen und das Problem ist ganz einfach zu lösen. Um Hilfe wäre ich sehr Dankbar!

__________________
Cu Chullain

hmmm weiss niemand Rat?

__________________
Cu Chullain