Для определенного количества колонок
.text_demoBlock {
padding-bottom:20px; /*отступ снизу*/
width:100%; /*указываем общую ширину блока с колонками*/
text-align:justify; /*выравнивание текста внутри колонок*/
column-count: 3; /*количество колонок, на которое хотим разбить текст*/
-moz-column-count: 3; /*для мозилы*/
-webkit-column-count: 3; /*для webkit браузеров*/
column-gap: 40px; /*отступ между колонками*/
-moz-column-gap: 40px;
-webkit-column-gap: 40px;
column-rule: 1px solid #000; /*если требуется по дизайну, разделяем колонки линией*/
-moz-column-rule: 1px solid #000;
-webkit-column-rule: 1px solid #000;
}
Для элементов разбивки - для правильного переноса
page-break-inside: avoid; break-inside: avoid;
При задании определенной ширины
.text_demoBlock {
padding-bottom:20px; /*отступ снизу*/
width:100%; /*указываем общую ширину блока с колонками*/
text-align:justify; /*выравнивание текста внутри колонок*/
column-width: 200px; /*указываем ширину колонок*/
-moz-column-width: 200px;
-webkit-column-width: 200px;
column-gap: 40px; /*отступ между колонками*/
-moz-column-gap: 40px;
-webkit-column-gap: 40px;
column-rule: 1px solid #000; /*если требуется по дизайну, разделяем колонки линией*/
-moz-column-rule: 1px solid #000;
-webkit-column-rule: 1px solid #000;
}
Не касающийся разбивки, но обожаемый IE...
<head>
<!--[if IE]>
<script type="text/javascript" src="/папка со скриптами/css3-multi-column.js"></script>
<![endif]-->
</head>
Более подробно тут
