Bekijk eerst de basics over clear en float.

/// Referentie: https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_cols

 

Beschouw volgende pagina met een header, menu, 3 kolommen en een footer.
Bekijk deze pagina in uw browser via ‘Inspect element’ en verwijder alle CSS om het resultaat te zien.

De html-structuur is als volgt:

<div class="header">xx</div>
<div class="menu">xx</div>

<div class="row">
  <div class="column">xx</div>
  <div class="column">xx</div>
  <div class="column">xx</div>
</div>

<div class="footer">xx</div>

Deze pagina is voorlopig niet responsive. Beschouw onderstaande regel:

* {
    box-sizing: border-box;
}

Hij bepaalt dat alle elementen zich als een box zullen gedragen. Zonder deze regel zullen de 3 kolommen niet mooi naast elkaar staan.

 

Overige belangrijke CSS regels zijn:

.column {
     float: left; //zodat de 3 boxes mooi naast elkaar staan
     width: 33.33%; //3 even grote boxen
}

Volgende regel is tevens belangrijk om te vermijden dat de footer overloopt in de kolommen:

.row:after {
    content: "";
    display: table;
    clear: both;
}

Om deze pagina responsive te maken

We willen in de eerste plaats dat voor kleine schermen de 3 kolommen netjes onder elkaar i.p.v. naast elkaar komen te staan. Dus: vanaf een schermbreedte < 600px willen we dat de kolombreedte niet 33% is maar 100%.

@media (max-width: 600px) {
    .column {
              width: 100%;
    }
}

Bekijk deze pagina

CMS sjablonen

Als we bovenstaande pagina nog wat verder opmaken via padding: 20px; en margin-top: 20px; krijgen we 2 responsive sjablonen die de basis vormen van zowat alle CMS systemen:

Professioneel CMS sjabloon

zie: https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_col-s