Een 3 kolommen layout maken op basis van tableless (x)html is iets moeilijker te maken als een 3 kolommen layout op basis van tabellen. Het probleem schuilt hem in het creeren van 3 even hoge kolommen.Als je een 3 kolommen layout maakt met behulp van tabellen dan zal elk van de 3 cellen even hoog blijven ongeacht de inhoud. Bijvoorbeeld:

Kolom 1 : 3 menu items
Kolom 2 : Content van 600 px hoog.
Kolom 3 : Een banner van 120 px hoog.

Als je nu alledrie de kolommen een achtergrondkleur geeft zul je zien dat alle 3 de kolommen 600px hoog zijn. Met tableless html zal dit niet lukken. Elke div zal de hoogte aannemen aan de hand van de inhoud die erin staat.Hoe kunnen we dit oplossen?

De oplossing is vrij logisch en als je het gezien hebt zul je vast denken “Ja dat is eigenlijk best simpel”.Je maakt eerst een container div met de breedte van de 3 kolommen samen. Nu maak je een image van 1px hoog waarin de 3 kolommen staan. je krijgt dan dus een image die net zo breed is als de breedte van de website.De container div geef je die afbeelding als achtergrond en in die container div maak je 3 div’s welke je door middel van “float: left” naast elkaar positioneert. Je geeft deze kolommen ook de juiste breedtes aan de hand van de kolommen in het design. In deze 3 div’s kun je nu bijv. een menu, content en een banner zetten.

Een voorbeeld is te zien op de volgende url:

http://blog.m-designz.nl/tutorials/3-kolommen/

Hierboven zie je dus een voorbeeld van een container div met daarin de 3 divjes om de 3 kolommen mee op te maken. Qua css zal er nu dus best veel moeten gebeuren om dit te laten werken. De css kan er als volgt uitzien:

Op deze manier creeer je dus een layout met 3 kolommen welke allemaal even hoog zijn. Waarschijnlijk zul je nu zeggen “Ja dat is inderdaad erg simpel”.

Stem of voeg toe aan: