[Suess]

Hallo zusammen!

Ich möchte folgendes Ergebnis erreichen: http://img406.imageshack.us/img406/1...lappendky3.gif

Die beige (gelbe) Fläche soll ein Bild darstellen. Darunter befinden sich 3 divs im bekannten 3 Spalten-System. Nun soll aber die mittlere Spalte 30px weiter oben beginnen (also das Bild um 30px überlappen) und die rechte Spalte weitere 30px weiter oben beginnen (also das Bild um 60px überlappen).
Insgesammt sollen diese 3 Spalten aber unten IMMER gemeinsam abschliessen, ganz egal welche Spalte von den 3en den längsten Inhalt (die größte Höhe) besitzt.
Zusätzlich werden die 3 Spalten von 2 grauen Balken getrennt, die sich jeweils in der von sich aus linken Spalte befinden und sowohl oben wie auch unten 5px Abstand besitzen. Diese sollen sich natürlich auch der Höhe der Spalten anpassen.

Nun ist die Frage: Wie?

PS: Die 3 Spalten würde ich das Bild sehr gerne per position: relative überlappen lassen.


Greetings,
Suess

[Suess]

Unlösbar?

[heiko_rs]

Nur mal ein paar spontane Ideen, nicht übermäßig durchdacht

Die divs floaten und mit margin-top in Position bringen, und für den gemeinsamen Abschluß sowie die graue border siehe FAQ (oberster Thread) Punkt 1. Ggf. kannst Du die divs per neg. margin-top aus dem div schieben, das die "faux columns"-Grafik enthält.

Und das zu überlappende Bild ist mit Sicherheit eh ein Hintergrundbild, da Deko und nicht inhaltlich relevant.