Search code examples
cssalignmentlistitemword-wrapcss-multicolumn-layout

Prevent column wrapping in unordered list, align list items to top of column

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.

Solution

  • 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.