Question

I have multiple ul sections and used multi column css to split them automatically into three columns. The problem is css breaks the li content and move them to the next column. I need to move the whole ul to the next column not the individual li content.
This is the screenshot.

The result should like

This is my html code

<div class="columnsmulti">
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
<ul>
<li>Lorem Ipsum123</li>
<li>Lorem Ipsum123</li>
</ul>
<ul>
<li>Lorem Ipsum456</li>
<li>Lorem Ipsum456</li>
<li>Lorem Ipsum456</li>
</ul>

</div>

This is my css

.columnsmulti {
    -moz-column-count: 3; 
    -moz-column-gap: 10px;
    -moz-column-rule: 3px double #666;
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px;
    -webkit-column-rule: 3px double #666;
    column-count: 3;
    column-gap: 10px;
    column-rule: 3px double #666;
}  

How can i do that?

Answer 1

You should use the column-break rules in css. Here’s an example applies for Chrome:

.columnsmulti ul {
    -webkit-column-break-inside: avoid;
    -webkit-column-break-after: always;
}

Add these lines in your css and it’ll work as your demand.

Reference

P.S.: Seems -moz-column-break isn’t recognized by my Firefox.