Bastian: Div-Container verschachteln

Hallo zusammen

Ich grüble seit einiger Zeit an einem Problem und komme nicht weiter. Es geht um die Verschachtelung von div-Containern mit CSS.
Die Webseite besteht grob gesagt aus drei solchen Containern:

#umriss {
position: absolute;
top: 152px;
text-align: left;
width: 708px;
left: 0px;
margin: 0;
padding: 0;
height: auto;
background-image: url("../grafiken/layout/rahmen-inhalt.jpg"); }

#inhalt {
position: relative;
top: 0px;
width: 488px;
left: 180px;
margin: 0 23px 30px 15px;
padding: 0;
height: auto; }

#navigation {
position: absolute;
top: 0px;
left: 0px;
width: 180px;
height: auto; }

Inhalt und Navigation werden vom Umriss umschlossen. Die Navigation als linke Spalte ist meist ungleich hoch wie der Inhalt. Das Hintergrundbild des Umrisses soll nun soweit nach unten gekachelt werden, dass Navigation und Inhalt unterdeckt werden.

So sieht der HTML-Code aus:

<BODY>
  <div id="umriss">

<div id="navigation">
  NAVIGATION
</div>

<div id="inhalt">
  INHALT
</div>

</div>
</BODY>

Jetzt ist es aber leider so, dass die Navigation weiter nach unten reicht als der Inhalt, das Hintergrundbild des Umrisses aber nach dem Inhalt nicht mehr weiterläuft.

Kann mir jemand einen Rat geben, wie ich das Ganze zu verschachteln habe, damit ich es so habe, wie ich es gerne möchte? Das wäre super! :-)

Gruss
Bastian

  1. Tachchen!

    Mein Tipp:
    Streiche sämtliche Angaben zum Thema "position", anschließend float: left
    für die Navigation ... dann brauchst du nur noch ein Element, das nach dem
    Inhalt wieder clear:left zugewiesen bekommen kann und schon ist die Sache in
    deinem Sinne gestaltet.

    Gruß

    Die schwarze Piste

    --
    ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
    http://www.smartbytes.de
    1. Vielen Dank für die Antworten.

      Ich habe mit float:left vorerst mal Positives bewirkt. So weit, so gut. Was ich nicht ganz verstehe, ist, was du mit clear:left genau meinst.

      Zudem habe ich die Navigation in das Inhalt-Div gepackt und habe nun Probleme mit den Tabellen im Inhalt. Diese sind auf width:100% gesetzt und werden nun von der Navigation rechts nach aussen gedrückt.

      1. Hi,

        Ich habe mit float:left vorerst mal Positives bewirkt. So weit, so gut. Was ich nicht ganz verstehe, ist, was du mit clear:left genau meinst.

        es stellt den Elementfluß wieder her und ist erweitert einen nicht floatenden Bereich ggfls. auf die Höhe des nebenstehend floatenden Elements.

        Zudem habe ich die Navigation in das Inhalt-Div gepackt und habe nun Probleme mit den Tabellen im Inhalt. Diese sind auf width:100% gesetzt und werden nun von der Navigation rechts nach aussen gedrückt.

        Logisch. Das war auch verkehrt. Setze Dein Inhalt-Div neben die Navigation und gebe ihm ein passendes margin - dieses verringert dann seine Breite.

        freundliche Grüße
        Ingo

  2. hey du,

    Also ich würde den div so anlegen falls es keine größeren Probleme gibt:

    #navigation {
    position: relative;
    top: 0px;
    left: 0px;
    width: 180px;
    float:left;
    height: auto; }

    naja also dann bis bald

    Mfg Chriss

    --
    Grüße aus Bayern