[CSS/IE] Content schaalt niet naar menu

[Jerry]

Ik post normaliter nooit een topic (alles is te vinden in de search), maar hier kom ik echt niet uit.

Het geval:

Ik heb een site opgebouwd en nu wil ik de content-div net zo groot maken als het menu (+ wat extra's). Dit werkt in Firefox, maar helaas werkt het maar gedeeltelijk in Internet Explorer.
Als ik veel content in m'n content-div heb staan dan werkt het wel in Internet Explorer, maar als ik bijvoorbeeld maar 1 berichtje in m'n content-div heb staan dan verbergt IE de rest van de pagina (alles na het ene berichtje). Dit heeft te maken met overflow: hidden dat ik in m'n css heb staan, maar als ik dit niet gebruik dan werkt het weer niet in Firefox.

Hier is een voorbeeld van de pagina: http://www.bv-acquit.com/test/index-new.html

CSS:

Cascading Stylesheet:

#container
{
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 750px;
    text-align: left;
    border: 1px #000000 solid;
}

#header
{
    background-image: url(../img/header-img.gif);
    background-repeat: no-repeat;
    height: 80px;
    padding: 0;
    margin: 0;
    width: 750px;
    border-bottom: none;
}

#content
{
    position: relative;
    width: 750px;
    /*background-color: #ffffff;*/
    padding: 0;
    margin: 0;
    /*background: #ffffff url(../img/bg.gif) repeat 0 0;*/
    overflow: hidden;
    
    /* IE Hack - To prevend flicker/disappearing div's */
    height: 100%;
}

#navbar
{
    background-color: #ffffff;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 150px;
    font-size: 0.8em;
    margin: 0;
}

#main-text
{
    background-color: #ffffff;
    margin-left: 150px;
    padding: 0 10px 10px 10px;
    
    /* IE Hack - To prevend flicker/disappearing div's*/
    height: 100%;
}

#footer
{
    background-color: #ffffff;
    padding: 0;
    margin: 0;
    border-top: 1px #000000 solid;
    width: 750px;
    font-size: 0.7em;
    text-align: center;
    padding-top: 2px;
    padding-bottom: 2px;
}

Gehele CSS-file is hier te vinden: http://www.bv-acquit.com/styles/style.css


HTML (globaal opgebouwd):

HTML:

<div id="container">
    <div id="header"></div>
    <div id="content">
        <div id="navbar"></div>
        <div id="main-text"></div>
    </div>
    <div id="footer"></div>
</div>

Wat al geprobeerd:
- Ik heb het al geprobeerd met Faux-columns.
- overflow: auto (Deze geeft scrollbars en dat is niet de bedoeling).
- Alles wat ik maar kon vinden in de search.

Waarom dit topic:
Misschien zijn er hier mensen die misschien nog een idee hebben wat ik zou kunnen proberen.

[André]

Als je de hoogte net zo hoog wil hebben als het menu kun je de hoogte toch gewoon vastzetten? En anders maak je het menu relative ipv absolute, eventueel maak je van beide floats met een <br style="clear: both" /> er onder.

[ Voor 4% gewijzigd door André op 05-08-2005 23:48 ]

[Jerry]

André schreef op vrijdag 05 augustus 2005 @ 22:00:
Als je de hoogte net zo hoog wil hebben als het menu kun je de hoogte toch gewoon vastzetten? En anders maak je het menu relative ipv absolute, eventueel maak je van beide floats met een <br style="clear: both" /> er onder.

Argh, Zo simpel . Damn, na een tijdje zie je het gewoon niet meer. En dan is het natuurlijk zo simpel.
Ik heb het nu zo opgelost:

Bij #content & #navbar beide float: left; toegevoegd en #navbar op relative positioning gezet. Daarna nog een <br style="clear: both" /> eronder gezet en het werkt als een dolle . Zowel op IE als op FF .

Bedankt André