S CSS3 lahko kreiramo besedilo v stolpce, kot je npr. postavljeno v časopisih. Za postavitev besedila v stolpce uporabimo naslednje lastnosti:
Določitev števila stolpcev: column-count
Lastnost column-count razdeli odstavek besedila v stolpce, vrednost lastnosti je število, ki pove v koliko stolpcev naj se besedilo razdeli. Ta lastnost je v brskalnikih še slabo podprta, zato za pravilen prikaz uporabimo za brskalnike Chrome, Safari in Opero predpono -webkit-, za brskalnik Firefox pa -moz-. V IE je lastnost podprta od verzije 10.0 naprej.
<div id="column">Lorem ipsum dolor sit amet, consectetur... </div>#column { -webkit-column-count: 3 } /* Chrome, Opera, Safari */
#column { -moz-column-count: 3 } /* Firefox */
#column { column-count: 3 }
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum erat eu commodo ultricies. Vestibulum pharetra vehicula pharetra. Vestibulum magna lorem, lobortis sed justo at, sollicitudin ultrices tortor. Nullam lacus metus, pulvinar et euismod a, ornare sit amet mauris. Donec tempor sodales diam, at tempor augue dignissim nec. Vivamus vel tellus vestibulum, vulputate nisl at, porttitor velit. Nunc sagittis dui vitae quam molestie cursus. Etiam posuere varius magna, sed porttitor diam. Aliquam id nisl aliquam leo consequat malesuada. In ornare sem nunc, non auctor turpis bibendum in. Morbi sit amet ante sit amet lacus iaculis egestas. Aliquam eu leo sit amet quam imperdiet accumsan volutpat nec sapien.
Določitev razmika med stolpci: column-gap
Lastnost column-gap določa razmik med stolpci besedila. Tudi ta lastnost je v brskalnikih še slabo podprta, zato uporabimo tudi predponi -webkit- in -moz-.
<div id="column">Lorem ipsum dolor sit amet, consectetur... </div>#column { -webkit-column-count: 3 } /* Chrome, Opera, Safari */
#column { -moz-column-count: 3 } /* Firefox */
#column { column-count: 3 }
#column { -webkit-column-gap: 30px } /* Chrome, Opera, Safari */
#column { -moz-column-gap: 30px } /* Firefox */
#column { column-gap: 30px }
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum erat eu commodo ultricies. Vestibulum pharetra vehicula pharetra. Vestibulum magna lorem, lobortis sed justo at, sollicitudin ultrices tortor. Nullam lacus metus, pulvinar et euismod a, ornare sit amet mauris. Donec tempor sodales diam, at tempor augue dignissim nec. Vivamus vel tellus vestibulum, vulputate nisl at, porttitor velit. Nunc sagittis dui vitae quam molestie cursus. Etiam posuere varius magna, sed porttitor diam. Aliquam id nisl aliquam leo consequat malesuada. In ornare sem nunc, non auctor turpis bibendum in. Morbi sit amet ante sit amet lacus iaculis egestas. Aliquam eu leo sit amet quam imperdiet accumsan volutpat nec sapien.
Določitev vodilne črte med stolpci: column-rule
Lastnost column-rule določa in oblikuje vodilno črto med stolpci. Tudi ta lastnost je v brskalnikih še slabo podprta, zato uporabimo tudi predponi -webkit- in -moz-.
<div id="column">Lorem ipsum dolor sit amet, consectetur... </div>#column { -webkit-column-count: 3 } /* Chrome, Opera, Safari */
#column { -moz-column-count: 3 } /* Firefox */
#column { column-count: 3 }
#column { -webkit-column-gap: 30px } /* Chrome, Opera, Safari */
#column { -moz-column-gap: 30px } /* Firefox */
#column { column-gap: 30px }
#column { -webkit-column-rule: 2px solid gray } /* Chrome, Opera, Safari */
#column { -moz-column-rule: 2px solid gray } /* Firefox */
#column { column-rule: 2px solid gray }
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum erat eu commodo ultricies. Vestibulum pharetra vehicula pharetra. Vestibulum magna lorem, lobortis sed justo at, sollicitudin ultrices tortor. Nullam lacus metus, pulvinar et euismod a, ornare sit amet mauris. Donec tempor sodales diam, at tempor augue dignissim nec. Vivamus vel tellus vestibulum, vulputate nisl at, porttitor velit. Nunc sagittis dui vitae quam molestie cursus. Etiam posuere varius magna, sed porttitor diam. Aliquam id nisl aliquam leo consequat malesuada. In ornare sem nunc, non auctor turpis bibendum in. Morbi sit amet ante sit amet lacus iaculis egestas. Aliquam eu leo sit amet quam imperdiet accumsan volutpat nec sapien.