Kolmidden als eerste div in de code

Kolmidden staat samen met #kollinks in een extra div: #subwrapper. Dit maakt het mogelijk om de inhoud van #kolmidden in de code vóór die van de andere twee kolommen te plaatsen (met een float: left). Dat is gunstig voor de zoekmachineindexering. Subwrapper heeft een width en een float: left en staat als eerst in #wrapper. Daarna komt #kolrechts.

Kop als laatste div

Een manier om #kolmidden als allereerste in de code te plaatsen, dus ook nog eens vóór #kop, is door #kop absoluut te positioneren. Deze kan dan in de code, zolang het maar binnen #wrapper (het containing block) is, overal staan waar je wilt *.

Subwrapper krijgt een margin-top die gelijk is aan de hoogte van #kop, zodat deze mooi op elkaar aansluiten. Om ook #kolrechts onder #kop te laten aansluiten krijgt deze een padding-top die gelijk is aan de hoogte van #kop. Margin-top voor #kolrechts (nog in de flow van de pagina, heeft namelijk geen float) werkt niet in alle browsers. Bij #subwrapper werkt margin-top wel doordat deze een float heeft.

Lees het commentaar in de code van deze pagina voor verdere uitleg.

* Alleen IE6 kan dwars gaan liggen als #kop een andere plek krijgt in de code dan de huidige. Los een eventuele afwijking op met een conditional comment.

Semantiek

Let wel dat iedere extra div die voor de structuur van de inhoud niet direct nodig is, er volgens de richtlijnen één teveel is. En in dit geval is er sprake van een extra div (#subwrapper) om de volgorde van divs in de code te laten afwijken van die op het beeldscherm.

Kollinks heeft geen float en geen width en vult dus de beschikbare breedte in #subwrapper op.