Ik herinner me nog hoe alles in de TABLE dagen makkelijk was. Een header maken die links en rechts tekst heeft staan is ongeveer een standaardmethode geworden om gescheiden informatie te tonen in een header van één regeltje. En in de dagen dat rommelige td th tr table markup niet langer in de mode is, zijn DIV en SPAN je vriend. Maar dan moet je er wel mee kunnen omgaan.

DIV en SPAN zijn een fijne combo, en als je een maandje aan het markuppen bent leer je de mankementen van de belangrijke browsers wel kennen. Wanneer je dan wegens ver@$%plich4!@#tiH!gnen (ik ben allergisch voor dat woord en kan het niet meer tiepen) een poos aan het afkicken bent koelt deze browserkennis af en zijn alle onlogische fouten weer net zo irritant als de eerste keer dat je ze meemaakte.

Omdat het gebruiken van een links-rechts headertje zo elementair is en sommige browsers het verneuken zal ik het voor eens en altijd uitleggen zodat jij en ik het nooit meer hoeven te vergeten. Hoewel het imo toch echt een fout is, is het megasimpel te omzeilen, en toch was ik voor de tweede keer zo lang vol onbegrip aan het zoeken naar de reden van de frop dat ik me ervoor zou moeten schamen.

Genoeg gepraat. Neem deze code:Een DTD zou netjes zijn maar heeft geen invloed op deze fout. Als je het natiept ziet het er wat anders uit omdat ik standaard werk in de REDnet CSS omgeving, maar dat is in feite ook irrelevant.

#bif is een tekstblok en ook irrelevant, maar zonder deze DIV zou de #cif DIV zo breed als het venster zijn en dat is niet handig voor de screenshots.
#cif is de header, een balkje waarin we links én rechts een stukje tekst willen hebben staan.
Check de SPAN CSS en markup, en je snapt precies de bedoeling.

Opera snapt het iig wel:

Opera 8.54
(De rechtertekst is een pixel te hoog, er moet een extra SPAN om deze tekst (zie dit artikel) om dit te fixen. Maar te veel irrelevante tags maakt het voorbeeld onoverzichtelijk.)

Maar Internet Explorer is het er niet mee eens:

Internet Explorer 6.0.2900

Ook Firefox doet liever moeilijk als het makkelijk kan:

Firefox 1.5.0.4
(En merk op hoe het dit maal Firefox is die een uitzondering maakt qua breedte van de elementen.)

Met een beetje geklooi zou je het compatibel kunnen krijgen, maar ik heb de (in dit geval slechte) eigenschap om dingen rationeel uit te gaan zitten denken. Hoe zouden malafide browsers denken?

Hmmm.. een DIV, ok, een leeg blok. Wat zit er in? Ah, een SPAN in de zelfde layer.
Alles zonder position- float- of layer-tag zit in de zelfde layer. De tweede SPAN is dus een andere layer.
een inline element dus. Verder geen child-elementen van deze DIV in de zelfde layer? Dan vul ik de regel als een block element. Volgende element in de DIV is een SPAN met een float: right. Het is dus een andere layer maar (stukje IE/FF logica) deze regel is bezet dus float ik de SPAN maar rechts op de volgende regel!

Je zou denken dat IE en FF van het W3C layerprincipe zijn afgestapt, omdat ze de tweede SPAN iets laten aantrekken van het BLOCK element. Alsof het in de zelfde layer zit.

Nu heb ik eens een pro-MS nerd horen zeggen dat IE de parent de ruimte die een element inneemt omvat als deze parent zelf ook float. Het nadeel is dat de parent van de parent dan ook moet floaten, anders omvat deze op zijn beurt zijn child niet meer, enzovoort. Dat levert wel onnodig werk, maar als het moet dan moet het. Nieuwe code:Nu weet Internet Explorer er wel raad mee:

Internet Explorer 6.0.2900

En Firefox, steeds meer op IE lijkende dan vroeger:

Firefox 1.5.0.4

Maar Opera denkt nu '#cif is een float; een layer die niet kan weten hoe breed de parent op een andere layer is. Daarom maak ik hem maar zo breed als nodig om de childs erin te kunnen passen.'

Opera 8.54

Dit kan je natuurlijk oplossen door de DIV een width te geven:
Opera 8.54
Nu werkt het wel, maar ik heb een hekel aan statische layouts (denk aan de strookjes in het midden van een 21 inch scherm) en een header met een vaste breedte is niet te gebruiken in een vloeibare layout. Het is dus niet in alle gevallen te gebruiken, werkt niet vlekkeloos en heeft potentie om uit te groeien tot een grotere rommel dan een TABLE markup. Vooral in een ingewikkeldere site (zoals deze) is het gewoon niet te doen, alles tot en met de überparent te laten floaten, wil de markup een beetje leesbaar blijven. Bovendien is dat af te raden omdat je site dan totaal onleesbaar wordt met oudere browsers.

Weer terug naar de eerste versie dus, en opnieuw denken. Waar was ik? Oja. Je zou denken dat IE en FF van het W3C layerprincipe zijn afgestapt, omdat ze de tweede SPAN iets laten aantrekken van het BLOCK element (de DIV parent). Alsof het in de zelfde layer zit.

Hmm.. je zou ze dus als eerste met de tweede SPAN moeten opschepen om hem rechts op de zelfde regel te krijgen, omdat de DIV dan nog leeg is. Draai dus je SPANs even om:Opera vind het zo ook best:

Opera 8.54

Internet Explorer kan het nu ook:

Internet Explorer 6.0.2900

En Firefox ook:

Firefox 1.5.0.4

Wat denken de IE/FF maatjes nu?

Hmmm.. een DIV, ok, een leeg blok. Wat zit er in? Ah, een SPAN die rechts wil.
De SPAN wordt rechts in de DIV gezet. Maar nu wordt het opeens wel als een volwaardige layer gehanteerd, omdat de DIV blijkbaar nog leeg is:
Volgende element is een SPAN. Ok die zetten we netjes in de DIV. Verder geen child-elementen van deze DIV in de zelfde layer? Dan vul ik de regel als een block element.

Dit slaat nergens op. Elementen van verschillende layers zouden van nature elkaar niet in de weg moeten kunnen zitten, ongeacht de volgorde. Ratio is dus niet de manier! Tenzij je alleen aandacht voor Opera gebruikers hebt. Maar goed, het werkt wel.

DE TAGS DIE RECHTS FLOATEN MOETEN DUS GEWOON EERST, DAT IS ALLES.

Opera maakt de volgorde verder niet uit.