[wuschba]

Hi. Ich habe 2 DIVs, die nebeneinaner floaten. Gemäß den FAQs kann man nicht festlegen, dass beide gleich hoch sein sollen.

Jetzt möchte ich zwischen diesen DIVs eine graue Trennlinie machen, die aus 3 Bildern besteht, die von oben nach unten angeordnet sind: Das oberste fadet von weiß nach grau, das mittlere ist grau und das untere fadet von grau nach weiß. Also (|| ist die besagte Trennlinie):

+-------++----------------+
| Menü  || Inhalt         +
| Menü  || Inhalt         +
| Menü  ||                +
| Menü  ||                +
+-------++----------------+

Mein Problem ist: Die Höhe des linken DIVs (Menü) und die des rechten DIV (Inhalt) stehen erst zur Laufzeit fest. Auch weiß ich nicht, ob das linke oder das rechte DIV höher ist und überhaupt wie hoch beide in Pixel sind. Bei einem Tabellenlayout wäre die Lösung klar, aber wie mache ich dies in CSS?

[heiko_rs]

Ordne die Linie einem Element zu, das die beiden Floats umgibt. Alternative: Beide Elemente bekommen die Linie und werden per rel. Pos. um die Breite der Linie übereinander geschoben, so daß nur eine Linie sichtbar ist.

[wuschba]

Danke für Deine Antwort. Wie ich das mit einer einteiligen Linie machen würde, ist jetzt klar (z.B. dem Background zuweisen), aber wie realisiere ich diese 3-teilige Linie? Der Anfang und das Ende der Linie sind immer gleich hoch (z.B. 20 Pixel), während die Mitte der Linie sich ja der Höhe des größten der beiden DIVs anpassen soll.

[heiko_rs]

Ein Beispiel: Das alles umgebende div bekommt den mittleren Teil der Linie. Falls es noch ein weiteres div gibt, das sowohl Navi als auch Content umgibt, bekommt dieses den unteren Teil, und dann kannst Du den oberen entweder Content oder Navi zuweisen (alles Hintergrundbilder).

[wuschba]

Ah, verstanden. Danke!