CSS - Kolommen maken


Met behulp van CSS kun je sinds CSS 3 tekst opdelen in kolommen zoals je bijvoorbeeld vaak in een krant ziet. Het toepassen van kolommen middels CSS werkt in de browsers Google Chrome, Firefox en Safari. Wat betreft Internet Explorer is er ondersteuning vanaf versie 10, oudere versies van Internet Explorer ondersteunen CSS kolommen niet.

Bij het toepassen bepaal je zelf het aantal kolommen die je wilt hebben, in het voorbeeld zijn het er 3. Verder bepaal je de kleur van de lijn tussen de kolommen al is dit niet vereist om op te geven. En je geeft als laatste de ruimte aan tussen de tekst en de scheiding. Wat betreft Firefox, Google Chrome en Safari is er een prefix nodig om het te laten werken.

div.column {
        -moz-column-count:3;
        -moz-column-rule:solid 2px #ccc;
        -moz-column-gap:25px;
        -webkit-column-count:3;
        -webkit-column-rule:solid 2px #ccc;
        -webkit-column-gap:25px;
        column-count:3;
        column-rule:solid 1px #ccc;
        column-gap:25px;
}


Met scheiding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut orci eget arcu commodo ullamcorper. Aenean est odio, egestas scelerisque elementum eget, laoreet eu enim. Nulla vel elementum lorem. Vestibulum eget hendrerit augue. Suspendisse tristique purus vel leo sagittis non convallis dui mattis. Fusce odio turpis, consectetur pretium tincidunt at, pellentesque id mi.

Zonder scheiding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut orci eget arcu commodo ullamcorper. Aenean est odio, egestas scelerisque elementum eget, laoreet eu enim. Nulla vel elementum lorem. Vestibulum eget hendrerit augue. Suspendisse tristique purus vel leo sagittis non convallis dui mattis. Fusce odio turpis, consectetur pretium tincidunt at, pellentesque id mi.