Dit is de kop

Kolrechts heeft een float: right en gedraagt zich net als #kollinks.

Kolmidden

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.

Kolommen

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.

Float

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.

Het boxmodel

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.