OK, mal schauen wie das aussieht.
Der Bereich right baut sich jetzt grafisch zusammen aus einer top-Grafik Nr. 15
Seite links Nr. 16, Seite rechts Nr. 18
Skalierbar sind wohl die darunterliegenden seitlichen Grafiken des Rahmens mit der Nr. 29 links und 31 rechts
Unten beendet dann den Rahmen die Nr. 32
Das heißt wenn der Content länger wird, soll 29 und 31 skalieren und insgesamt ab Nr. 37 entsprechend mit runterrutschen.
btw. Am oberen Rand von Nr. 37 über den drei Personen ist noch ein hellgrauer Rand zu sehen der da bestimmt nicht hin soll.
Da die Grafik oder die Contentbox right nicht horizontal skalierbar sein muß sondern nur vertikal, würd ich wohl den Aufbau der Grafiken grundsätzlich anders angehen.
Und zwar die Seitenteile 16 und 18 an die Top-Grafik 15 dranhängen. Also eine komplette Grafik daraus machen und diese als Background für right definieren top left repeat-x
Dann kommt eine komplette Grafik also über die ganze Breite von right bestehend aus 29 und 31, halt mit der Hintergrundfarbe dazwischen. Diese Grafik soll ja dann vertikal skalieren wenn der Content länger wird.
Und unten beendet Nr. 32 das Ganze.
also mal im Groben bei dieser geänderten Grafikaufteilung.
Code:
#right {
background: url(151618.png) top left no-repeat;
}
#rightcontent {
background: url(2931.png) repeat-y;
}
#rightbottom {
background: url(32.png) no-repeat;
}
<div id="right">
<div id="rightcontent">
blah blah blah hier der Inhalt.
</div>
<div id="rightbottom"></div>
</div> <!-- ende right -->
[edit: hier auch mal schauen
CSS: Runde und andere Ecken
http://www.andreas-kalt.de/webdesign/tutorials/runde-ecken