[CSS] Probleem met double-margin bug

[Dries Arnolds]

Ik heb een probleem met de zogenaamde "double margin-bug". Ik weet dat de erg simpele oplossing is om "display: inline" toe te voegen, maar op dat moment kan ik die subcontainer div niet meer gebruiken om de achtergrondkleur toe te voegen zodat beide kolommen even lang worden (want hij is nu inline). Het is dus of de double margin-bug, of kolommen van verschillende lengte.

Is hier een subtiele oplossing voor? Ik heb al een aantal dingen geprobeerd, maar

HTML:

code:

<div id="container">
<div id="header"></div>

<div id="subcontainer">
<div id="tekst"></div>
<div id="sidebar"></div>
</div>

<div id="footer"></div>

</div>

en de CSS:

code:

#container {
    width: 760px;
    margin: 25px auto 0 auto;
    padding: 0;
    text-align: left;
    background-image: url(images/back.gif);
    background-repeat: no-repeat;
    background-position: top;
}

#subcontainer {
    width: 720px;
    margin: 0 20px;
    background-color: #fff;
}

#header {
    text-align: left;
    width: 760px;
}

#tekst {
    float: left;
    margin: 0 auto;
    padding: 0;
    width: 500px;
    background-color: #fff;
    text-align: left;
}

#sidebar {
    float: left;
    margin: 0 auto;
    padding: 0;
    width: 220px;
    background-color: #fff;
    text-align: left;
}

#footer {
    margin: auto;
    text-align: left;
    width: 760px;
    clear: both;
}

[crisp]

Je subcontainer is geen float en de double-margin bug treedt alleen op bij floats.
Zo op het eerste gezicht zie ik ook geen verschillen tussen IE of Firefox in standards compliant mode

[Dries Arnolds]

Nee, maar de floats in die subcontainer krijgen wel die double margin bug...

edit: Nu ik het zo bekijk heb je gelijk, maar toch wordt de subcontainer over de hele breedte gerenderd terwijl de breedte duidelijk op 720px staat.

De doctype is standards compliant en er staat geen xml declaratie vooraan het document, dus IE rendert gewoon in standards mode. Wacht, ik zet even een voorbeeldje online....

[ Voor 62% gewijzigd door Dries Arnolds op 05-02-2006 15:40 ]

[crisp]

Dries Arnolds schreef op zondag 05 februari 2006 @ 15:27:
Nee, maar de floats in die subcontainer krijgen wel die double margin bug...

Of zie ik het nou helemaal verkeerd?

Nee, waarom? Je floats hebben een left-margin van 'auto' wat effectief 0 is voor floats. Daarbij heeft de margin van je subcontainer daar geen invloed op aangezien margins niet inherit worden.

[Dries Arnolds]

Je hebt helemaal gelijk, maar toch worden er marges verdubbeld.

Ik heb wat code aangepast. Hier kun je het probleem zien. Werkt dus wel in FF en niet in IE6.

[ Voor 36% gewijzigd door Dries Arnolds op 05-02-2006 15:48 ]

[crisp]

Dit heeft eerder te maken met collapsing margins wat in IE niet goed gaat...

[Dries Arnolds]

Okee, bedankt voor je hulp.

Ik zal nog een keer naar die IE buglist gaan kijken bij collapsing margins.

[Verwijderd]

Je moet in console sv_cheats 1 typen

[crisp]

Cascading Stylesheet:

#container {
    width: 760px;
    margin: 25px auto 0 auto;
    text-align: left;
    background-image: url(images/back.gif);
    background-repeat: no-repeat;
}

#subcontainer {
    margin: 0 20px;
}

#header {
    margin-left: 20px;
}

#tekst {
    float: left;
    width: 500px;
    background-color: #fff;
}

#sidebar {
    float: left;
    width: 220px;
    background-color: #fff;
}

#sidebar img {
    margin-bottom: 15px;
}

#footer {
    clear: both;
}

Komt al beter overeen

[ Voor 7% gewijzigd door crisp op 05-02-2006 16:11 ]