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