Problem mit position bzw. Verschachtelung von divs

[Der Martin]

n'Abend Thorsten,

Ich denke mal, dass ich vor einem einfachen Anfängerproblem stehe.

in gewisser Weise ja.

Im Quelltext werden die vier div left1, left2, right1 und right2 innerhalb des div main positioniert.

Nein, das ist nicht ganz richtig. Sie werden mit Bezug zu div#main positioniert, aber nicht wirklich innerhalb. Dadurch, dass du diese Container absolut positionierst, bilden sie einen eigenständigen Kontext und beeinflussen die Größe ihres Elternelements nicht mehr. Aus der Sicht von CSS sind sie eigentlich keine "richtigen" Kindelemente von div#main mehr; sie werden zumindest nicht mehr von diesem eingeschlossen.

Das Problem ist nun, dass der div main bei der Darstellung im Browser nur eine Zeile hoch ist, darunter folgen dann die vier genannten divs. Man beachte die weinrote Hintergrundfarbe und das "Eins" und "Zwei".

Genau. Der Container #main hat außer dem Text "Eins Zwei" keinen weiteren Inhalt mehr, daher fällt er bis auf eine Zeile zusammen.

Ein guter Rat: Verzichte soweit wie möglich auf absolute Positionierung; schau dir stattdessen eher mal an, was man mit display:inline-block anstellen kann, oder mit float.

Ich möchte nicht weiter mit Tabellen layouten.

Deinem Ansatz nach zu urteilen möchtest du schon ...

Ciao,
 Martin