Block Formatting Context - IE6 en IE7 vs moderne browsers

Kollinks heeft een float: left en een min-height.

Kolrechts heeft een float: right

Kolmidden

Kolmidden heeft geen float en zit dus nog in de flow van de pagina.

De buitenste div, #wrapper (lichtblauw), heeft een width wat IE7 en ouder interpretteert als hasLayout. Dit komt neer op toegevoegde block formatting context (BFC). En dat heeft de eigenschap dat het alle ingesloten elementen binnen het element houdt, er steekt niets meer uit. Margins en ingesloten floated blocks, zoals hier #kollinks en #kolrechts, blijven bij een element met toegevoegde BFC binnen boord. En dat maakt dat #wrapper in IE 7 en ouder meerekt met de rode kolom.

Alle moderne browsers zien width niet als toegevoegde BFC en daarom rekt #wrapper dan ook niet mee met de rode kolom. Meer over BFC

Bekijk deze pagina maar eens in IE7 of IE6 en vergelijk daarna het resultaat met IE8 en andere browsers. Dan zie dat in de eerste twee de lichtblauwe #wrapper meerekt met de rode kolom.

Dreamweaver geeft het resultaat van de toegevoegde BFC niet weer maar het is wel zichtbaar in de browers. De tussenruimte die je in Dw ziet onder #kop zie je in de browsers dan ook niet terug, omdat deze is opgelost met een overflow: hidden (ook een BFC).