[CSS] Div met height: auto strechted niet mee

[Verwijderd]

Ik loop wederom tegen een probleem aan

Ik heb de volgende css:

code:

#container {
    margin-left: auto; 
    margin-right: auto;

    text-align: left;
    width: 954px;
    height: 600px;

    position: relative;
}

#header {
    position: absolute;
    width: 954px;
    height: 26px;
    background-color: #121111;
    left: 0px;
    top: 0px;
}

#left {
    position: absolute;
    top: 26px;
    left: 0px;
    width: 249px;
    height: 572px;
}

#menu {
    position: absolute;
    top: 167px;
    left: 53px;
    width: 183px;
    height: 163px;
}

#center {
    position: absolute;
    top: 26px;
    left: 249px;
    width: 701px;
    height: auto;
    padding-left: 4px;
    background-color: #ffffff;
    text-align: left;
    overflow: visible;

}

#top_nav {
    position: absolute;
    width: 701px;
    height: 18px;
    top: 0px;
    left: 0px;
}

#page_content {
    position: absolute;
    width: 701px;
    height: 540px;
    top: 18px;
    left: 0px;
}

En de volgene html:

HTML:

<div id='container'>
    <div id='header'></div>
    <div id='left'>
        <!-- LEFT -->
    </div>
    <div id='menu'>
        <!-- MENU -->
    </div>
    <div id='center' style='border: 1px solid red;'>
        <div id='top_nav'>
            <!-- MEUK -->
        </div>
        <div id='page_content'>
            <!-- STRECHTENDE CONTENT MEUK -->
        </div>
    </div>
</div>

Het gaat dan om de layer center. Als ik een vaste hoogte opgeef dan strechted hij daar keurig op uit. Maar ik wil dat het automatisch de juiste hoogte wordt, maar hij blijft fijn in praktijk op height 0px; staan.

Met height auto krijg ik dus dit:



De met rood aangegeven DIV blijft dus klein terwijl dit volledig mee moet strechten.

[ Voor 5% gewijzigd door Verwijderd op 03-11-2006 18:15 ]

[Verwijderd]

Als ik zelfs dit doe:

HTML:

<div style='position: absolute; width: 300px; height: auto; border: 1px solid black;'>
    <div style='position: absolute; top: 500px;'>
        test
    </div>
</div>

Dan werkt dat niet.. gebruik ik de propert height soms verkeerd?

[Verwijderd]

Het werkt wel als de onderliggende div relatief gepositioneerd is. Is er geen non javascript manier om het ook voor onderliggende absoluut gepositioneerde block elementen te laten werken??

--- euhmm volgens mij werkt het niet omdat onderliggende elementen een top waarde hebben die vallen vervolgens vrolijk buiten de height auto..

[ Voor 27% gewijzigd door Verwijderd op 03-11-2006 20:15 ]

[crisp]

Aboluut gepositioneerde elementen zitten niet in de flow en hebben dus geen invloed op de elementen waar ze in zitten. Probeer sowieso absolute positioning zoveel mogelijk te vemijden, de layout die jij voor ogen hebt is prima te doen mbv gewoon static positioning en een paar floats; misschien moet je eens kijken naar de 'faux columns' techniek