Css columns question

[ReGGaeBOSS]

hi,

I am using css3 columns to split a <ul></ul> into two columns.

So basically it should look like this:

<ul>
<li></li> | <li></li>
<li></li> | <li></li>
</ul>

And it does. But i noticed on some places where I use this on lists the last <li> in the left column is cut so half of it is on the right column. Is it possible to make it so that elements wont split when using columns?

[RyanReese]

Any particular reason for using CSS multi columns for this? Why not a standard float or table-cell or inline-block approach?

I don’t believe you can manually stop a left column LI from overlapping into the right column.

[ReGGaeBOSS]

Well the markup is rendered from the backend of the site when the client is doing lists from a WWYSIWYG editor. And the lists tend to get very long, so we would like to split them in some easy way. I tried setting <li> to 50% width and floating them left, but if one is longer then the other it …well it doesnt look good. http://jsfiddle.net/awc9z3et/5/

Have any ideas?

[RyanReese]

Hmm, actually try adding this

li {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

[ReGGaeBOSS]

thanks works=)

[RyanReese]

CSS3 columns are so rare I forgot about that completely . You’re welcome.