I am currently exploring a cross-browser approach to create a columned layout for an unordered list. The content is generated by a CMS, so my options are limited to adding classes only. While I have been successful in creating columns, I also need to control where the columns break as they may not always be of equal length. This is how the markup appears:
ul {
list-style: none;
}
.c3 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
.colBreak {
-moz-column-break-before: always;
-webkit-column-break-before: always;
column-break-before: always;
font-weight: bold;
}<ul class='c3'>
<li class='colBreak'>Item1</li>
<li>Item2</li>
<li class='colBreak'>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
<li>Item8</li>
<li>Item9</li>
<li>Item10</li>
<li class='colBreak'>Item11</li>
<li>Item12</li>
<li>Item13</li>
<li>Item14</li>
</ul>The CSS code functions well in Chrome and IE/Edge, but encounters issues in Firefox:
The objective is to achieve a 3-column layout, with Item1, Item3, and Item11 appearing at the top of each respective column.
In Chrome, the layout displays correctly:
In Firefox, the formatting on Item1, Item3, and Item11 does not render as expected.