[css] Css probleem in firefox ie werkt

[Defector]

Ik heb een simpele lay out van een banner een top menu en daaronder een links menu en een content gedeelte. De links menu en het content gedeelte zijn naast elkaar gefloat en gecentreerd doormiddel van margin's. Nu wil ik onder deze twee elementen een gedeelte over laten zodat de pagina niet direct afgekapt wordt. Bij ie kan ik dit realiseren door of in html een &nbsp of in css een div te gebruiken. Bij firefox werkt dit niet. Wat wel werkt is als ik tekst langer maak dan de afstand die rechts nog over is tot de scrolbalk maar dit werkt niet met een div zolang te maken.

HTML:

<div class="banner">
</div>

<div class="topmenu">
</div>

<div class="menuEnContentCenter">
    <div class="leftmenu">
    </div>
    
    <div class="content">
    </div>
</div>

<div class="empty"> 
&nbsp;                     
</div>

Cascading Stylesheet:

.empty{
    margin-left:auto;
    margin-right:auto;
    height:10px;
}
.menuEnContentCenter{
    margin-left: auto;
    margin-right: auto;
    width: 800px;
}
.content{
    background-color: #FFFFCC;
    background-image: url(content.png);

    width: 600px;
    height: 600px;
    
    position:relative;
    left:10px;
    top: 20px;
    
    float:left;
}

.leftmenu{
    background-color: #FFFFCC;
    background-image: url(left-menu.png);
    
    float:left;
    
    width: 200px;
    height: 600px;
    
    position:relative;
    top:20px;
}
.topmenu{
    background-color: #FFFFCC;
    background-image:url(top-menu.png);
    
    width: 800px;
    height: 40px;
    
    margin-left: auto;
    margin-right: auto;
    
    position:relative;
    top:10px;
}
.banner{
    background-color: #FFFFCC;
    background-image: url(banner.png);
    
    height:120px;
    width:800px;
    
    margin-left: auto;
    margin-right: auto;
}
body {
    background-color: #FFFFCC;
}

hoe kan ik dit het beste aanpakken?

[Borizz]

Voeg dit eens toe, dit zal de floats 'clearen', zie ook hoofdstuk 9.5 van het visual formatting model.

Cascading Stylesheet:

.menuEnContentCenter{ 
    overflow: hidden;
}

Het volgende kan ook helpen:

Cascading Stylesheet:

.empty {
    clear: both;
}

[Verwijderd]

Niet getest, maar ik zou 't gooien op een 'overflow: auto' en een 'margin-bottom' op je menuEnContentCenter. Door de overflow zou die div om je floats heen wrappen, en je margin eronder zorgt dan voor je extra ruimte. Is ook wat netter i.t.t. een spacer div.

[Defector]

dat werkt allebei niet met overflow hidden kapt firefox de div af en auto worden de elementen weer onderelkaar gezet. En margin bottom voegt niks toe aan het hele verhaal.

Beetje tevroeg gereageerd als ik een div gebruikt waarin clear:both in de css wordt aangegeven werkt het wel.

[ Voor 25% gewijzigd door Defector op 13-10-2007 16:05 ]