->
HTML
<div id="box">
<div id="right"><p>Rechte Spalte mit beliebig viel Text</p></div>
<div id="center"><h1>Überschrift 1</h1><h2>Überschrift 2</h2></div>
<div id="left"><p>Linke Spalte mit beliebig viel Text</p></div>
<div class="clear"></div>
</div>
Wichtig ist bei dieser Variante die Reihenfolge der Boxen, sonst kommt es zu einem heillosen Chaos. Da die Boxen von rechts nach links sortiert sind und auch quasi an den rechten Rand der Box "geklebt" sind, müssen sie auch von rechts nach links aufgerufen werden. Der HTML-Schnipsel ist aus einer Seite von mir im Netz, funktioniert also und ist auch einwandfrei validiert.
zugehöriger CSS-Schnipsel mit BEISPIEL-Breiten:
HTML
#box {
width:600px;
display:block;
float:right;
padding:0;
}
#left {
width:200px;
display:block;
float:right;
padding:0;
}
#center {
width:200px;
display:block;
float:right;
padding:0;
}
#right {
width:200px;
display:block;
float:right;
padding:0;
}
div.clear {
clear:both;
}Um das Ganze besser zu verstehen, einfach mal bei SelfHTML reinschaun. Der Link führt genau auf die Seite, auf der dein Problem behandelt wird: Dreispaltige Layouts mit Hilfe von CSS.
