3-Spalten-Layout: Mitte fest - rest variabel
 

Hallochen

Nach stundenlanger Recherche im www und Layout Basteleinseid ihr meine letzte Rettung. Ich möchte, wie der Titel schon erkläert, ein 3 spaltiges Layout aufsetzen mit fester Breite in der Mitte, links und rechts die Spalten sollen eine Mindestbreite besitzen aber sonst den Screen variabel ausfüllen. Ich habe hier einen Beispielshot gebastelt um das ganze besser zu beschreiben:

http://www.moon28.de/img/css/layout.gif

Bisher hab ich das ganze über ein Hintergrundbild (wie ein Band quer über den Screen) gelöst, jetzt sollen aber die beiden äußeren Spalten auch in der Höhe und (durch das Wegfallen des Hintergrundbildes) auch in der Breite variabel sein, unabhängig voneinander so dass ich mit den Schatten als auch mit der Zentrierung in Schwierigkeiten komme.

Die Idee ist, "linke_spalte" hat einen festen Wert, "links" drumherum soll in der Breite variabel sein mit dem Background-Bild (welches sehr breit ist um versch. Screenbreiten abzupuffern, daher auch no-repeat). "linke_spalte" soll dann in der Höhe in das Background-Bild ziehen. Gleiches mit der rechten Spalte.
Leider kann ich, um das ganze variabel zu gestalten, nur % angeben, das beißt sich aber mit der festen Breite der "content" Spalte. Auch margin-left:auto brachte mich nicht weiter.

Bisher sieht mein CSS grob skizziert so aus:

body {
margin: 0 auto;
text-align:center;
}

.pagewidth {
margin: 0 auto;
text-align:center;
width:100%
}

.links {
width:22%;
background: url(../images/bg_linkespalte.gif) top right no-repeat;
float:left;
}

.linkespalte {
width:200px;
float:right;
}

.content {
width:615px;
float:left;
background: url(../images/bg_content_schattenweiss.gif) repeat-y; :!:
}

--> vorher hatte der Contentbereich die Schatten, jetzt müssens die äußeren Spalten sein, aber der weiße Schatten unten richtet sich nach dem inneren Content :!: :?: :?: :?:

.rechts {
width:22%;
background: url(../images/bg_rechtespalte.gif) top left no-repeat;
float:left;
}

.rechtespalte {
margin:0;
padding:0;
width:160px;
float:left;
}

html:

<div class="pagewidth">

<div class="links>
<div class="linke_spalte">Inhalt</div>
</div>

<div class="content">Inhalt</div>

<div class="rechts>
<div class="rechte_spalte">Inhalt</div>
</div>

</div>

Hinweis: ich hab das als beispiel stark abgespeckt, es ging mir hier um die grundelemente.
So funktioniert es nur bedingt, die rechte Spalte springt schnell nach unten bei Screenverkleinerung oder es bleibt ein weißer Rand stehen rechts (bei zu kleinen % Angaben der äußeren Spalten)

Ich bin für JEDEN Ratschlag offen!!!Tausend Dank im voraus :!:

wenn die beiden äußeren spalten content enthalten sollen, kannst du mal das probieren: http://www.xhtmlforum.de/viewtopic.php?p=55525#55525

wenn kein content rein soll, würd ich mit sowas wie http://www.alistapart.com/articles/onionskin/ arbeiten.
lässt sich ja anpassen.

SUPER vielen dank - ich werd mich vertiefen!