KOLRECHTS: heeft een float: right en is dus uit de flow van de pagina. #wrapper negeert hierdoor #kolrechts en zal niet meerekken met de afmetingen van deze box.
#kolmidden heeft geen float en zit dus nog in de flow van de pagina en gedraagt zich dus 'normaal'. #kolmidden weet bovendien niets van #kollinks en #kolrechts doordat deze een float hebben en gedraagt zich alsof deze niet bestaan.
Door hun float zweven #kollinks en #kolrechts boven #kolmidden. Doordat #kolmidden een linker- en rechterborder 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.
De gekleurde borders zorgen ervoor dat de eerste en derde kolom naar beneden lijken door te lopen. Omdat de width van wrapper in procenten is opgegeven, gedraagt de middenkolom zich nu liquid. Vergroot of verklein het browservenster maar eens en kijk wat er gebeurt.
Borders kunnen in CSS 2.1 niet in procenten worden ingegeven dus de linker- en rechterkolom kunnen in deze opzet niet liquid gemaakt worden. Merk op dat de tekst bij onvoldoende breedte buiten de kolom valt en over andere tekst heen kan vallen.
VOET: heeft een clear: both en nestelt zich dus onder de boxen met een float.