Mozilla Firefox v113.0 documentation says it supports column views and the break-before
CSS property completely. But when I set break-before: avoid-column
OR break-before: column
it does not identify the property.
The need is to set fixed position of multiple div elements once the page has loaded. My solution is working on every browser but Mozilla.
I use JS to set class .first-item
and .last-item
to the div to fix their position.
PS. All div elements are dynamically generated.
PPS. I do not want to use break-inside
.main {
column-count: 2;
column-width: 36rem;
margin-bottom: 1.5rem;
.item-wapper {
break-inside: avoid-column;
&.first-item {
break-before: column;
}
&.last-item {
&:not(.first-item) {
break-before: avoid-column;
}
}
}
}
I also tried using
page-break-before
but to no avail.