Over CSS floating layout
Veel websites zijn gebouwd op een grid-systeem, een raster dat bestaat uit rijen en kolommen, dat lijkt op een tabel. Een
populair grid-systeem is Bootstrap, dat werkt met twaalf kolommen (die
naar eigen inzicht gecombineerd kunnen worden) en een onbeperkt aantal rijen.
Een beperking van dit soort platforms is dat het aantal kolommen een vast gegeven is. Die beperking heb je niet als je ze
zelf programmeert in CSS.
Er zijn binnen CSS drie manieren om een webpagina in te delen met een grid-systeem: grid
layout, floating layout en flex layout.
Met deze drie methodes kun je dezelfde resultaten halen, met aanzienlijk minder code.
Op deze pagina wordt CSS floating layout behandeld.
Dit verhaal leunt zwaar op de uitleg van de module CSS-Float op w3schools.com: CSS Float.
Bij deze aanpak zijn twee CSS-eigenschappen van belang: float en clear. Er is geen sprake van een duidelijk afgebakend systeem zoals bij grid. Dit layout-systeem is daardoor heel flexibel (soms té flexibel). Je moet je layout dus goed testen op verschillende schermbreedtes en zonodig ingrijpen om rare zij-effecten te voorkomen. Hoe dat moet, wordt verderop in dit verhaal uit de doeken gedaan.
Met float geef je aan hoe een element in de breedte wordt uitgelijnd:
• left Het element wordt tegen de linker marge geschoven. Als er een element is dat ook al met float:left
tegen de linker marge is geschoven, wordt 'dit' element er rechts naast gezet, mits de plaatsruimte dat toelaat.
• right Het element wordt tegen de rechter marge geschoven. Als er een element is dat ook al met float:right
tegen de rechter marge is geschoven, wordt 'dit' element er links naast gezet, mits de plaatsruimte dat toelaat.
• none Het element wordt neergezet zoals het uitkomt. Er wordt niet mee geschoven. Dit is de default instelling.
Met clear geef je aan of een ander element naast 'dit' element mag worden geplaatst:
• left Elementen mogen niet links van 'dit' element worden geplaatst.
• right Elementen mogen niet rechts van 'dit' element worden geplaatst.
• both Elementen mogen niet links en niet rechts van 'dit' element worden geplaatst.
• none Elementen mogen zowel links als rechts van 'dit' element worden geplaatst. Dit is de default instelling.
Andere CSS-eigenschappen die bij een floating layout van belang zijn:
• box-sizing Gebruik bij een floating layout altijd border-box Zie het item Over box-sizing voor meer informatie.
• overflow De default waarde is visible. Dat betekent dat de content van een kolom buiten de kolom
kan worden gerenderd. Dit kun je voorkomen met een zgn. "clearfix", zie het kopje verderop in de artikel. Als je
je scrollbars wilt toestaan, gebruik je overflow:auto of overflow:scroll. In het eerste geval verschijnen de
scrollbars als ze nodig zijn, in het tweede geval zijn ze er altijd. overflow:hidden raad ik af voor deze toepassing,
omdat het risico bestaat dat content onzichtbaar wordt.
• overflow-x Gelijk aan overflow, maar dan alleen voor horizontale scrollbars.
• overflow-y Gelijk aan overflow, maar dan alleen voor verticale scrollbars.
Hieronder zie je een indeling in drie kolommen met een header en een footer. Dat wil zeggen: mits de breedte van het document groter is dan 600px. Anders staan de drie kolommen onder elkaar.
Header
Er zijn drie rijen, elk in een <div>-tag.
• De eerste rij is de kop, deze heeft de klasse header. Omdat er geen breedte is gegeven neemt de browser
de hele breedte van het document, net als bij de kop. Hier is ook de opmaak van de kop geregeld.
• De tweede rij bevat drie kolommen. deze rij heeft de klasse row. Hiervoor is geen opmaak geregeld in
de CSS, omdat die in de kolommen staat. Wel is er een voorziening om te voorkomen dat er elementen voor of na de kolommen
komen te staan, zie onder het kopje 'Clearfix'.
• De derde rij is de voettekst, deze heeft de klasse footer. Omdat er geen breedte is gegeven neemt de
browser de hele breedte van het document. Hier is ook de opmaak van de voettekst geregeld.
De CSS kun je in de <head> zetten. Het ziet er als volgt uit:
<style>
* { /* Padding en borders binnen de grens van een blok houden */
box-sizing: border-box;
}
.header { /* Style de header */
background-color: #f1f1f1;
padding: 5px;
text-align: center;
font-size: 16px;
}
.column { /* Maak drie gelijke kolommen die naaste elkaar staan */
float: left;
width: 33.33%;
padding: 10px 0 0 10px;
height: 50px; /* Alleen voor het voorbeeld. Verwijderen voor een 'echte' site */
}
.row:after { /* Geen elementen voor of na een rij */
content: "";
display: table;
clear: both;
}
.footer { /* Style de footer */
background-color: #f1f1f1;
padding: 5px;
text-align: center;
}
</style>
De HTML in de <body> is eenvoudig:
<div class="header">
<h2>Header</h2>
</div>
<div class="row">
<div class="column" style="background-color:#aaa;">Kolom 1</div>
<div class="column" style="background-color:#bbb;">Kolom 2</div>
<div class="column" style="background-color:#ccc;">Kolom 3</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
Eigenlijk zijn de kolommen 'cellen'. Als je meer rijen met cellen wilt, voeg je gewoon een <div>-tag toe met klasse row. Je kunt daar ook een ander aantal cellen (lees: kolommen) in zetten, simpelweg door voor die cellen een andere klasse te maken waar de width een andere waarde heeft. Op deze manier voeg je ook cellen samen.
Clearfix
In de CSS-code kom je deze regels tegen:
.row:after { /* Geen elementen voor of na een rij */
content: "";
display: table;
clear: both;
}
Dit heet een Clearfix. Deze truc zorgt er voor en na de kolommen (cellen) geen andere elementen kunnen staan. Daarvoor
is er clear: both. Verder staat er display: table. Daardoor gedraagt een row zich als een tabel; dat
is precies de bedoeling. Zie ook het item Content opmaken met :before en
:after.
Responsive maken
Als de breedte van het document 600px is of kleiner, worden de kolommen onder elkaar gezet. Daarvoor wordt de breedte van
de kolommen (in de klasse column) op 100% gezet. Dat wordt gedaan met onderstaande uitbreiding van de CSS:
/* Responsive layout - Breedte van het window <= 600px */
@media (max-width: 600px) {
.column { /* Kolommen onder elkaar ipv naast elkaar */
width: 100%;
}
}
Opmerking:
Zoals bij het begin van dit verhaal is genoemd zijn er binnen CSS drie grid systemen waarmee je hetzelfde kunt bereiken. Je
kunt je het beste toeleggen op één systeem en alleen dát gebruiken.
Als je eenmaal een van de drie systemen grid, float of flex hebt gekozen, zorg dan dat je er goed in
wordt. Deze systemen door elkaar gebruiken geeft verwarring en leidt meestal niet tot het beste resultaat.
