Multi column layouts with CSS3

Browser Support

Internet Explorer 10 and Opera supports multiple columns properties.
Firefox requires the prefix -moz-.
Chrome and Safari requires the prefix -webkit-.

Although quite strong, the support is not yet universal so this technique should be used only to progressive enhancement of a web page.

Note: I have switched off multi-column layouts in mobile views.

HTML

<p>ipsum dolor sit amet cupcake etc.... </p>

CSS

p{ -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 1em; -moz-column-gap: 1em; column-gap: 1em; }

Example

Cupcake ipsum dolor sit amet cupcake I love. Tootsie roll wafer toffee dragee gummi bears dragee cotton candy. Biscuit sweet roll dragee.

Jujubes sugar plum dragee I love caramels gingerbread sesame snaps. Cupcake ipsum lol! I love marshmallow pastry. Jelly candy canes macaroon halvah I love halvah cake wafer. Jelly beans lemon drops I love wafer icing tart chocolate.

Muffin chocolate cake brownie cotton candy ice cream tart sesame snaps macaroon. Ice cream halvah donut pudding cake caramels. Muffin chocolate cake apple pie.

Jelly beans souffle dragee fruitcake. Halvah I love muffin biscuit brownie cupcake. Icing pie chocolate cake lemon drops dragee. Tart pudding carrot cake biscuit jelly-o marshmallow.

Bonbon tootsie roll applicake jelly-o. Macaroon faworki sweet apple pie jujubes danish. I love cookie I love macaroon sugar plum dessert bonbon. Sweet dessert tart.

Adding a divider

To add a divider simple add the following code

CSS

p{ -moz-column-rule:1px outset #999; /* Firefox */ -webkit-column-rule:1px outset #999; /* Safari and Chrome */ column-rule:1px outset #999; }

Example

Jelly candy canes macaroon halvah I love halvah cake wafer. Jelly beans lemon drops I love wafer icing tart chocolate.

Muffin chocolate cake brownie cotton candy ice cream tart sesame snaps macaroon. Ice cream halvah donut pudding cake caramels. Muffin chocolate cake apple pie.

Jelly beans souffle dragee fruitcake. Halvah I love muffin biscuit brownie cupcake. Icing pie chocolate cake lemon drops dragee. Tart pudding carrot cake biscuit jelly-o marshmallow.

Bonbon tootsie roll applicake jelly-o. Macaroon faworki sweet apple pie jujubes danish. I love cookie I love macaroon sugar plum dessert bonbon. Sweet dessert tart.