Columns in Content

This is a little demonstration how to separate content in columns. It also demonstrate how to make a break by using break-after and break-before. This break action is not support by all browsers.

by scurrilus

HTML

<script src="http://scurrilus.de/scurrilus-jsfiddle/scurrilus-copyright.js"></script>
<link rel="stylesheet" href="http://scurrilus.de/scurrilus-jsfiddle/scurrilus-copyright.css">
<!--powered by SCURRILUS-->
<div id="scurrilusCopy"></div>
<script>scurrilusCopy();</script>
<!--end powered by SCURRILUS-->

<div class="code">
    <ul class="newspaper">
        <li>Test1</li>
        <li>Test2</li>
        <li>Test3</li>
        <li class="breakme-before">Test4</li>
        <li>Test5</li>
        <li>Test6</li>
        <li>Test7</li>
        <li>Test8</li>
        <li>Test9</li>
        <li>Test10</li>
        <li class="breakme-after">Test11</li>
        <li>Test12</li>
        <li>Test13</li>
        <li>Test14</li>
        <li>Test15</li>
        <li>Test16</li>
        <li>Test17</li>
        <li>Test18</li>
        <li>Test19</li>
        <li>Test20</li>
    </ul>
</div>

CSS

.newspaper {
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 4;
}

.breakme-before {
    -webkit-column-break-before: always;
    -moz-break-before: always;
    column-break-before: always;
}

.breakme-after {
    -webkit-column-break-after: always;
    -moz-break-after: always;
    column-break-after: always;
}