Problem mit der Höhenangabe height in CSS

    Guten Tag,

    ich habe folgendes Problem in einer geschachtelten "div"-Struktur:

    Die Höhe des ersten Div-Bereiches habe ich mit "min-height:585px; height:auto;" definiert. Die Höhe des zweiten Div-Bereiches, der sich innerhalb des ersten befindet, habe ich mit "height:auto;" definiert.

    Die inhaltliche Höhe des zweiten Div-Bereiches ändert sich je nach dem Inhalt. Hier funktioniert auch alles so wie es soll, d. h. die Höhe wird automatisch angepaßt.

    Was leider nicht funktioniert, ist die automatische Höhenanpassung des ersten Div-Bereiches, die in Abhängigkeit der Höhe des zweiten Div-Bereiches verändert werden soll.

    <HTML>
    <body>
    <div style="min-height:585px; height:auto; overflow:visible;">
    <div style="height:auto;">
    ...
    </div>
    </div>
    </body>
    </HTML>

    Kann mir jemand helfen?

    Vielen Dank und bis dann

    Schildmi

    Vielen Dank für die rasche Antwort.

    Ich habe das Problem durch die obige Anregung gefunden, aber leider noch keine Lösung.

    Die Div-Struktur ist insgesamt noch etwas aufwändiger als zuerst beschrieben. Es gibt dort Div-Bereiche, die mittels "float" nebeneinander dargestellt werden (linker Seitenbereich - Mittelbereich - rechter Seitenbereich).

    Und sobald "float" verwendet wird, funktionieren die Höhenangaben nicht mehr. D. h., die Höhe des obersten Div-Bereiches wird nicht mehr durch die Höhe des "Seiteninhalts" bestimmt.

    Und das ist das Problem.

    Der Quellcode sieht folgendermaßen aus:

    <div style="min-height:585px; height:auto; overflow:visible;">
    <!-- linker Seitenbereich //-->
    <div style="position:relative; left:0px; top:0px; width:30px; float:left;"> ... </div>

    <!-- Mittelbereich //-->
    <div style="height:auto; overflow:visible; float:left;">
    <!-- Bildleiste im Kopfbereich //-->
    <div style="width:900px; height:120px;"> ... </div>
    <!-- 1. Seiten-Navigation //-->
    <div style="height:20px;"> ... </div>
    <!-- Seiteninhalt //-->
    <div class="inhalt_hintergrund"> ... </div>
    <!-- 2. Seiten-Navigation //-->
    <div style="height:20px;">
    <div style="width:200px; height:20px; text-align:left; float:left; line-height:20px;"> ... </div>
    <div style="width:500px; text-align:center; float:left; line-height:20px;"> ... </div>
    <div style="width:200px; text-align:right; float:right; line-height:20px;"> ... </div>
    </div>
    </div>

    <!-- rechter Seitenbereich //-->
    <div style="width:30px; float:right;"> ... </div>
    </div>

    Das Problem ist ziemlich komplex, aber ich hoffe, daß mir jemand weiterhelfen kann.

    Vielen Dank und bis dann

    Schildmi

    Bitte mal als komplette HTML irgendwo hochladen. Dieses "hier und da fehlt noch was", hilft keinem was.

    So Dinge mit float und position:relative sind eh dinge die sich unangenehm auf die höhenausdehnung von Elementen auswirken. In der Regel entkoppelt das float ein Element aus dem Verbund mit genesteten Elementen. Kann man aber auch bei w3c nachlesen (Beispielgrafiken beachten):
    http://www.w3.org/TR/CSS21/visuren.html#floats