Block formatting context - Clearen zonder clear

Ik heb een float: left
( en een min-height van 600px, met in IE6 geen min-height maar een height van 300px)

Ik heb een float: right

Ik heb een overflow: hidden

Overflow: hidden toegepast op een absoluut gepositioneerd element met een vaste hoogte en breedte, verbergt de inhoud die daar niet binnen past. Maar pas overflow: hidden toe op een standaard block-level element zoals hier, en het zorgt ervoor dat ingesloten elementen met float niet meer uitsteken: het containing block met de overflow (let op, dat hoeft niet altijd de parent te zijn) rekt mee. Ook de top- en bottom margins van ingesloten blocks steken niet meer uit maar vallen binnen hun (directe) parent. En dat is een groot verschil.

Clear

Door overflow zo te gebruiken is clear niet meer nodig om een containing block te laten meerekken. En het vergroot de mogelijkheden want een tussenliggende parent rekt niet mee, het werkt van bijvoorbeeld grootouder op kleinkind. Ook eerdere floats buiten de parent worden niet beëindigd.

Overlappen

Doordat een toegevoegde BFC zorgt dat het element niet meer overlapt met andere elementen met toegevoegde BFC (hier de kolommen met float), zijn de linker- en rechter margins van #kolmidden niet meer nodig om het beeld te maken van kolommen. Ze zijn zelfs ongewenst want zouden maken dat #kollinks beneden de andere kolommen komt te staan. Want ook de margins overlappen niet meer bij toegevoegde BFC.

IE6

In IE 6 staat #kolmidden beneden #kollinks. Door er een width aan te geven die past tussen de beide kolommen, komt #kolmidden ertussenin te staan. In deze layout is #wrapper 900px breed en zijn beide kolommen zijn samen 400px, dus 500px past er exact tussenin. Helaas denkt IE 6 daar anders over, pas bij een breedte van 494px staan de drie divs naast elkaar. Mocht iemand een beter sluitende oplossing weten dan hoor ik die graag.

Wrapper heeft een display: inline-block

Omdat #kollinks en #kolrechts beide een float hebben rekt #wrapper standaard niet met hun hoogte mee. Hier is gekozen om display: inline-block aan #wrapper toe te voegen. Display:inline- block geeft block formatting context en een eigenschap daarvan is dat het meerekt met de inhoud.

Clear

Dat kan je oplossen door het laatste element in #wrapper een clear te geven. In deze layout (zonder voet) zou dat betekenen dat er een speciaal element voor clear geplaatst moet worden. Andere oplossing om dat te voorkomen zou zijn clearfix. Beide oplossingen doen eigenlijk hetzelfde, verschil is dat je in het eerste geval een extra HTML-element nodig hebt voor clear en bij clearfix niet.

Display: inline-block

Voordeel van display: inline-block is dat het block formatting context toevoegt aan #wrapper. En een block-level element met toegevoegde BFC heeft bepaalde eigenschappen die zonder dat niet aanwezig zijn. In IE 7 en ouder krijgt #wrapper als toegvoegde BFC doordat het een width heeft. Door hier te kiezen voor een toegevoegde BFC ipv voor clear, maak je het gedrag van #wrapper in alle browsers gelijk. Zo wordt weergave van margins gelijk.

Horizontaal centreren

Als je na al de handelingen tot op dit punt, de layout bekijkt in de browser, staat deze links in het venster. Wil je de layout centreren dan doet margin: auto niets bij #wrapper. Logisch want dit werkt alleen op block-level elementen. Zodra je aan een block-level element BFC toevoegt is het geen block-level element meer. Enige oplossing die ik kan bedenken is een extra divje om het geheel heen. Helaas, er is dan toch extra markup nodig. Geef die div de width en de margin:auto van #wrapper en het geheel staat gecentreerd. Helaas gaat de motivatie hierboven onder het kopje 'Display: inline-block' dan niet meer op. Wat blijft is een interessante aanpak die in heel veel andere gevallen een oplossing zal bieden.