Multiple css column breaks ul content problem

Question

I have several ul sections and use multi column css to split them automatically into three columns. The problem is that css breaks the contents of li and moves them to the next column. I need to move the whole ul to the next column, and not to personal content. This is a screenshot.

The result should look 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 this?

Answer 1

You should use column separation rules in css. Here is an example for Chrome:

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

Add these lines to your CSS and this will work as your requirement.

Link

PS: It seems -moz-column-break not recognized by my Firefox.