css layout problem

Hallo, erstmal!

So nun zu meinem Problem. Hier eine kleine Übersicht:



Blauer,Grauer und Gelber Bereich werden mit Position absolut positioniert und der Rest definiert.

Problem gibt es bei den roten Bereichen.
Innerhalb des großen grauen Bereichs (Nennen wir ihn Content ) gibt es 1 bis n rote Bereiche diese sollen nebeneinander dargestellt werden.

Ist der Rote Bereich höher als der Graue so soll der Orange Scrollbalken (Y) im grauen Bereich erscheinen.

Sind zb. 2 Rote Bereiche breiter als der Graue so soll der Orange Scrollbalken (X) im grauen Bereich erscheinen.

In weiterer Folge werd ich mit Javascript abfangen wann gescrollt wird um damit mit Javascript auch im Blauen Bereich zu scroll.

Hoffe ihr versteht mein Problem.
Am besten wäre natürlich eine Lösung ohne Javascript aber mir fällt zurzeit leider nicht ein wie.

Im Blauen Bereich stehen Informationen die Abhängig davon sind was im Roten bereich steht. Scorll man jetzt im Grauen Bereich muss ich per Javascript automatisch auch den Blauen Bereich scrollen. Der blaue Bereich muss allerdings fixiert sein da er sich nicht bewegen soll wenn ich im Content die x-richtung scroll

pack den blauen bereich auch in den grauen, dann scrollt der mit!
und für die x-richtung musst ihn fixieren. (wobei ich mir da grad ned sicher bin, ob das funktioniert)

und den grauen bereich machste mit overflow:scroll; scrollbar!

eigentlich müsstest bei jeden roten nur float; left; und width: xxpx; eingeben

Jaja, das leidige Thema mit mehreren Spalten und CSS. Vor allem wenns auch noch immer gleich hoch sein sollen.

Falls es dich doch noch interessiert, hier ein netter Artikel darüber: http://www.positioniseverything.net.../onetruelayout/