Zweispaltiges Layout mit CSS

[Mario Zikmann]

Hallo,

ich versuche seit einiger Zeit, mit CSS ein zweispaltiges Layout hinzubekommen. Im Prinzip ist das auch nicht so das Problem. Nun sollen aber beide Spalten gleich lang sein, wobei sich die Länge nach der jweils längsten der beiden Spalten richten soll. Und da fängt mein Problem an. Ich dachte mir, ich lege beiden Spalten (zwei DIV namens left und right) in ein drittes DIV (namens wrapper) und verpasse diesem ein Hintergrundbild, welches die Hintergrundfarben der Spalten "simuliert". Die beiden DIVS müssten nun das wrapper-DIV entsprechend ausdehnen, wodurch der Eindruck der gleich langen Spalten entstehen soll. Soweit, so schlecht. Postioniere ich die beiden Spalten mit float, stehen die zwar brav nebeneinander, aber das DIV wrapper wird nicht beeinflusst, weil durch das Float die DIVs left und right aus dem Fluss herausgerissen werden. Auch mit position: komme ich nicht weit. Eine relative Positionierung der linken Spalte wirkt sich zwar auf wrapper aus, aber nun steht natürlich das right-DIV unter left, nicht daneben.

Der HTML-Code

<div id="wrapper">
   <div id="left"></div>
   <div id="right"></div>
</div>

Der CSS-Code:

#wrapper {
    background:url(wrapper.gif) repeat-y #F7F7F6;}

#left {
    position:relative;
    top:0;
    left:0;
    width:149px;}

bzw.:
#left{
    float:left;
    width:149px;}

#right{
    width:610px;
    background:red;}

Bleibt noch zu sagen, dass alles in der Mitte des Fenster steht und eine Breite von 760px hat, das klappt aber alles soweit.

Gibt es ein Möglichkeit, das so hinzubekommen? Habe schon diverse Tutorials gelesen, aber auf exakt dieses Problem wird nirgends so richtig eingegangen.

Danke für eure Hilfe
und ein schönes Wochenende

Mario

[Jeena Paradies]

Hallo,

Du bist schon auf der richtigen Spur.

<div id="wrapper">
   <div id="left"></div>
   <div id="right"></div>

<div style="clear: both"></div>

</div>

So müsste dein Problem in den Griff zu kriegen sein denke ich.

Grüße
Jeena Paradies

[nag]

Hallo,

Postioniere ich die beiden Spalten mit float, stehen die zwar brav
nebeneinander, aber das DIV wrapper wird nicht beeinflusst, weil
durch das Float die DIVs left und right aus dem Fluss
herausgerissen werden.

klingt wie aus dem Lehrbuch ;)
Mit einem "clearenden" Element solltest du das Problem beheben können

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear

mfg NAG