4

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.

enter image description here

The result should like

enter image description here

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?

designersvsoft
  • 1,861
  • 9
  • 39
  • 66
  • 1
    ur code works fine, I don't see any li content breaking and moving to the next column. – Ashwin Jul 02 '12 at 07:15
  • I have checked it in mozilla firefox. Please refer the screenshot in my edited question. – designersvsoft Jul 02 '12 at 07:23
  • inspect in firebug, what is there in the empty spaces ? I am not facing that issue in any browser. Here is the fiddle - [fiddle](http://jsfiddle.net/ashwyn/uHzSQ/1/) – Ashwin Jul 02 '12 at 07:30
  • I think you have mistaken the bug. The content Lorem ipsum belongs to the first ul and the content lorem ipsum 123 belongs to the second ul. I need to break the column with whole ul not li. Please refer the screen shot for required result. – designersvsoft Jul 02 '12 at 07:37
  • Is there any other way to achieve this without using multi column css? – designersvsoft Jul 02 '12 at 07:48
  • right sorry. `column-count` property doesn't need 3 ul's for 3 columns. if you give just one ul and do `column-count=3` then you will get 3 columns. If I wanted to do something like this then I would have used `float` property. – Ashwin Jul 02 '12 at 08:07

1 Answers1

3

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.

rhgb
  • 4,075
  • 2
  • 21
  • 28