Kollinks heeft een float: left en is dus uit de flow van de pagina. #wrapper negeert hierdoor #kolrechts en zal niet meerekken met de afmetingen van deze box.
Kolrechts heeft een float: right en gedraagt zich net als #kollinks.
Kolmidden heeft geen float en zit dus nog in de flow van de pagina en gedraagt zich daarom 'normaal'. #kolmidden weet bovendien niets van #kollinks en #kolrechts doordat deze een float hebben en gedraagt zich daarom alsof deze niet bestaan.
Door hun float zweven #kollinks en #kolrechts boven #kolmidden. Doordat #kolmidden een linker- en rechtermarge heeft met gelijke afmeting als de breedte (incl. eventuele padding!) van de linker- en rechterkolom, staat #kolmidden voor het oog altijd mooi tussen beide kolommen in.
Probeer eens uit wat er gebeurt als de meeste tekst staat in kollinks, kolmidden, of kolrechts. U zult zien dat #wrapper meerekt. Maar doet #wrapper dat ook als u #voet verwijdert? Hoe komt dit?
Een element met float is uit de flow van de pagina, daarom doet #wrapper alsof ze niet bestaan. #kolmidden en #voet hebben geen float, zitten dus nog in de flow van de pagina, zijn dus bekend bij #wrapper die daarom met ze mee rekt.
De totale breedte die een element inneemt is de som van margin, border, padding en width. Bijvoorbeeld: width(200px) + padding (20px+20px) + borders (20px+20px) = 280px. Margin is geen vaste maat omdat de marges van aaneengrenzende elementen elkaar overlappen.
Omdat Internet Explorer het boxmodel anders interpreteert is het beter om te zorgen dat een element met een width geen padding heeft, geef dan de padding aan de inhoud van het element.
VOET heeft een clear: both en nestelt zich dus onder de boxen met een float.