CSS3 Columns

by ramyaaviji

HTML

<div id="content">
    <p>Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor.</p>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
<form id="controls">
    <label for="columns">Columns</label>
    <input id="columns" type="range" min="1" max="5" value="1" />
</form>

CSS

#content {
    -webkit-column-count: 1;
    -webkit-column-rule: 1px dashed #ccc;
    -webkit-column-gap: 2em;
    -moz-column-count: 1;
    -moz-column-rule: 1px dashed #ccc;
    -moz-column-gap: 2em;
    column-count: 1;
    column-rule: 1px dashed #ccc;
    column-gap: 2em;
    margin-bottom:2em;
}

JavaScript

var content = document.getElementById('content');
var columns = document.getElementById('columns');

columns.addEventListener('change', function (event) {
    content.style.webkitColumnCount = event.target.value;
}, false);