Wie dieses Layout umsetzen?

Hallo,

ich möchte angehängtes Layout gerne mit Contao umsetzen (achtet nicht auf die Farbe, das echte wird anderst ;) ), hab aber ein paar kleine Probleme..
Und zwar geht es hauptsächlich um den Bereich Links neben der Menüzeile. Den schwarzen Menübalken würde ich halt über den #left container machen und einfach ein wenig vom Rand entfernen, ich weiß allerdings nicht wie ich den content Bereich links machen soll...
Das Problem ist überhaupt erstmal, dass links noch hinzubekommen..Brauch ich da einen eigenen Layoutbereich? Hab leider noch keine Erfahrung damit und mit Template Anpassung..
Weiterhin sollte ja das links mit rotem Rand und das rechts mit rotem Rand immer gleich groß sein...und optimaler weise der schwarze Balken mit Menü immer da sein, auch wenn man mal beim content scrollen muss.

Hat mir vielleicht jemand nen Tipp wie ich das am besten umsetze :)?

Grüße Stefan

Code:

---

#main{padding-left: 250px; border: 5px solid red;}
#left {position:fixed;}

---

wird nur problematisch beim vergeben der position von left. glaub der wird ganz links kleben wollen. wenn du ein zentriertes layout hast wird das murks.
ansonsten ist das nur css spielerei. müsste also auch ohne eigenem layoutbereich oder Templateanpassungen gehen.

ok, also dass mit dem Rahmen hab ich hinbekommen.
Da der #main wohl über dem #left liegt, hab ich dem #left container einen z-index: 1; mitgegeben, allerdings hab ich noch dass Problem
wenn ich den main Container oben vom Rand entfernt haben möchte mit margin-top, dass er mir den left container mit verschiebt :(
man stößt doch immer wieder auf neue Herausforderungen ^^