Veel websites hebben een paginalayout die bestaat uit twee of drie kolommen. Dit zijn gebieden op de website die horizontaal naast elkaar staan en ieder hun eigen soort inhoud bevat.
Vaak zie je dat websites een menu naast de content hebben staan. Dit dictaat is daar een mooi voorbeeld van. Deze website heeft twee kolommen: één kolom met het menu en één kolom met de inhoud.
Vroeger deden we dit met tabellen. Je kunt vrij makkelijk een venster vullende tabel maken met één rij en twee kolommen. Dan kun je deze tabel gebruiken voor de kolommen van je website. Dit werkt goed, maar wordt tegenwoordig gezien als een bad practice. Deze techniek moet je dus eigenlijk niet meer gebruiken.
We moeten dus eigenlijk CSS gebruiken voor kolommen, maar waarom gebruiken we niet een <table> als deze vaak makkelijker is?
Aan elke HTML tag kleeft ook een betekenis. Een <p> gebruiken we voor paragrafen en <h1> gebruiken we voor headers. We kunnen deze tags ook andersom gebruiken, maar dan gaan we voorbij aan waar we ze voor zouden moeten gebruiken.
Zo ook voor een <table>, deze moeten we eigenlijk alleen voor tabulaire data gebruiken. Data die je bijvoorbeeld ook in een spreadsheet zou kunnen zetten. Een tabel met twee cellen met een volledige website daarin is dat duidelijk niet.
In de HTML staat alleen maar de inhoud van de webpagina. Alle tags geven aan wat alle gedeeltes betekenen, maar geven niet aan waar op de pagina dit hoort te staan. Dit is de taak van CSS. Als we het menu op een dag aan de rechterkant willen zetten zouden we niet de HTML hoeven aan te passen.
Het meest praktische argument om geen tabellen te gebruiken is omdat je er simpelweg minder mee kunt. Probeer deze website maar eens smaller te maken, als je hem smal genoeg maakt gaat het menu boven de inhoud staan. Je kan in de CSS aangeven dat bepaalde kolommen niet geprint mogen worden, of op een andere plek getoond worden op mobiele apparaten. Dat zijn dingen die je met tabellen niet kunt doen
We hebben met CSS al gezien hoe je elementen naast tekst kunt laten 'floaten'. Als je dit vergeten bent kijk dan snel nog even bij het hoofdstukje 'Float'. Dit floaten kunnen we ook gebruik om twee kolommen naast elkaar te zetten. Stel we hebben de volgende HTML die we in twee kolommen willen zetten:
#kolom1 {
border: 1px solid red;
}
#kolom2 {
border: 1px solid blue;
}
<div id="kolom1">Kolom 1</div>
<div id="kolom2">
Kolom 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consectetur, mi ut elementum ultricies, turpis velit facilisis ante, vitae luctus nunc erat non sem.
</div>
Standaard zijn blok elementen zoals div zo breed als ze maar kunnen zijn. Deze twee div's gaan zoals je ziet nooit naast elkaar passen. Laten we ze eerst de juiste breedte geven:
#kolom1 {
border: 1px solid red;
width: 30%;
}
#kolom2 {
border: 1px solid blue;
width: 60%;
}
<div id="kolom1">Kolom 1</div>
<div id="kolom2">
Kolom 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consectetur, mi ut elementum ultricies, turpis velit facilisis ante, vitae luctus nunc erat non sem.
</div>
Dat gaat waarschijnlijk wel passen. We voegen nu een float: left toe aan de eerste kolom. Met float kunnen we ervoor zorgen dat de eerste kolom links van de tweede kolom komt te staan.
#kolom1 {
border: 1px solid red;
width: 30%;
float: left;
}
#kolom2 {
border: 1px solid blue;
width: 60%;
}
<div id="kolom1">Kolom 1</div>
<div id="kolom2">
Kolom 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consectetur, mi ut elementum ultricies, turpis velit facilisis ante, vitae luctus nunc erat non sem.
</div>
De div's gedragen zich nu zoals de ballon en de tekst in het hoofdstuk 'Float'. De tweede kolom loopt nu om de eerste heen. Dat is niet wat we willen. We willen dat de tweede div er volledig naast staat.
Om dit te doen kunnen we een eigenschap van floats gebruiken: Als twee floatende elementen dezelfde ruimte willen innemen gaan ze naast elkaar staan. Dit doen ze wel alleen maar als er genoeg horizontale ruimte is, anders gaan ze alsnog onder elkaar staan.
Als we ze allebei dus left laten floaten gaan ze als twee kolommen naast elkaar staan:
#kolom1 {
border: 1px solid red;
width: 30%;
float: left;
}
#kolom2 {
border: 1px solid blue;
width: 60%;
float: left;
}
<div id="kolom1">Kolom 1</div>
<div id="kolom2">
Kolom 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consectetur, mi ut elementum ultricies, turpis velit facilisis ante, vitae luctus nunc erat non sem.
</div>
Het zal je misschien opvallen dat de percentages niet tot 100% optellen. Dit is omdat de width de inhoud van een div aangeeft, exclusief de border. Als we ze wel tot 100% laten optellen is de totale inhoud (100% plus die paar pixels die nodig zijn voor de border) breder dan de beschikbare horizontale ruimte. De twee floatende elementen gaan dan juist weer onder elkaar staan.
Probeer maar eens hierboven de width tot 100% op te laten tellen. En daarna de border weg te halen. Als het goed is past het dan juist weer wel.
Je ziet dat de eerste kolom niet zo hoog is als de tweede kolom. Je kunt met min-height deze hoger maken, maar het is in CSS niet mogelijk om te zeggen dat een element 'even hoog' moet zijn als een ander element.