1

I have an unordered list that contains several list items, split into 4 columns - Image below.

Unordered list, containing list-items that each contain an image, an h2 element, and separate unordered lists and list-items underneath.

I'm having trouble getting the list-items at the upper level - The ones that have the images next to them in the image example - to break the column and start at the next column if they would otherwise overlap.

I've tried setting CSS attributes on each of the UL elements throughout the CSS, such as:

-webkit-column-break-inside:avoid;
-moz-column-break-inside:avoid;
-webkit-column-break-inside:avoid;
-o-column-break-inside:avoid;

However, nothing seems to change. I thought this was the style that would control this, but I must be wrong.

What I'm asking, specifically, is how I can prevent the contents of a list-item from wrapping to the next column in an unordered list.

TylerH
  • 20,799
  • 66
  • 75
  • 101
schizoid04
  • 888
  • 1
  • 11
  • 27

1 Answers1

1

I realized while attempting to create a sample for review, that the issue was only occurring for me in Internet Explorer.

Adding the style 'break-inside:avoid;' corrected the problem in that browser; it appeared the issue was not present in the browsers that were covered by the other styles.

schizoid04
  • 888
  • 1
  • 11
  • 27
  • 1
    I believe that most the time when you attempt to isolate your problem you will end up solving it in the process. – zgood May 10 '17 at 21:01
  • In this case, I actually wasn't able to fully isolate / re-create the problem. The HTML was a page being procedurally / automatically generated from a 3rd party app; I only have access to configure the CSS being used. Most of the html content gets loaded as a result of a java-script call that only works if you're authenticated, so I couldn't find a way to export the HTML without it just being a mostly blank page, lol. It wasn't until I looked at a separate copy of the app on a different server that I realized it worked in Opera, a separate browser, and made the connection. – schizoid04 May 10 '17 at 21:37