Struktur mit div

[Sven]

Hallo,

ich möchte gern das Layout einer Seite mit Hilfe von divs darstellen. Auf der linken Seite soll ein Container mit dem Menü sein, darunter ein Container der nur den oberen Teil eines Leuchtturms enthält (kein Text), rechts dieser beiden Container der Inhalt der Seite und unter dem ganzen ein Bild mit dem unteren Teil des Leuchtturms.

Hier mal das Beispiel mit Hilfe von Tabellen.

Und hier das Beispiel mit divs (habe diese der Übersichtlichkeit halber bunt umrandet.
Das Problem ist, dass der obere Teil des Leuchtturms nicht unten "andockt".
Eine andere Lösung ist natürlich das Bild als Hintergrund eines Containers zu setzen und darin das Menü und den Content so wie hier, ich würde das ganze aber auch gerne nach der anderen Methode lösen, auch um das Anordnen von divs zu verstehen.

Vielen Dank für Eure Antworten,

Sven


Meine css sieht folgendermaßen aus:

Code: Alles auswählen

*{margin:0; Padding:0;}
div *{
  border:1px;
}
div#aussen {
  width:718px;
  height:100%;
 
  border:solid 0px #f00;
  position:absolute;
  top:10px;
  left:50%;
  margin-left:-359px;
}

div#oben {
  border:solid 1px #FF0000;
  margin:0px;
  background-image:url(bg_line.jpg);
  position:relative;
  top:0px;
  left:0px;
}

div#unten {
  height:107px;
  border:solid 1px #FF0000;
  margin:0px;
  clear:left;
  background-image:url(unten.jpg);
  position:relative;
  left:0px;
  bottom:0px;
}
div#lo {
  height:*;
  border:solid 1px #00FF00;
  margin:0px;
  background-image:url(bg_line.jpg);
  position:relative;
  bottom:0px;
  left:0px;
}
div#lm {
  border:solid 1px #00FFFF;
  margin-bottom:0px;
  background-image:url(bg_line.jpg);
  position:relative;
  bottom:0px;
  left:0px;
}
div#lu {
  height:337px;
  border:solid 1px #00FF00;
  margin-bottom:0px;
  background-image:url(links.jpg);
  position:relative;
  vertical-align:bottom;
  bottom:0px;
  left:0px;
}
div#links{
  width:186px;
  border:solid 1px #0000FF;
  margin:0px;
  float:left;
  vertical-align:bottom;
  background-image:url(links.jpg);
  position:absolute;
  top:0px;
  left:0px;
}
div#rechts {
  width:526px;
  smin-height:300px;
  border:solid 1px #0000FF;
  margin-left:188px;
  background-image:url(bg_line.jpg);
  position:relative;
  right:0px;
  top:0px;
}