How to break up column layouts in Firefox without column-span?

Question

I have just discovered that Firefox doesn't support the CSS property 'column-span' yet. Without 'column-span', breaking up column layouts seems unworkable. Is there a workaround to achieve the same result?

Answer 1

column-span is not supported on Firefox yet. However, you might be able to workaround this with your HTML structure.

Let's say you need a column-span:2 headline and the paragraphs should have 2 columns instead.

Like:

<article>
   <p>Introduction - this should span everything too</p>
   <h2>This should span everything</h2>
   <p>this text should be multicolumn</p>
   <h2>This should span everything again</h2>
   <p>this text should be multicolumn again</p>
</article>

The logic approach is to do something like:

article {
   column-count: 2;
}

article > p:nth-child(1) {
  column-span: all;
}

article > h2 {
  column-span: all;
}

But as mentioned, this breaks horribly in Firefox. It also causes some issues with text sometimes being cut off on Safari. As the date of writing, only Chrome shows a satisfying result.

In this case you can avoid column-span completely:

article {
    // no need
}

article > p:nth-child(1) {
     // no need
}

article > p:nth-child(n+2)  {
   column-count: 2;
}

article > h2 {
    // no need
}

You can apply the style directly on the paragraphs.

The result looks fine on Firefox, Safari and Chrome. And it's less code. So maybe you can adjust your HTML a little so you simply don't rely on column-span at all.

Answer 2

Here's what worked for me:

@supports not (column-span: all) {
    .some-css-class {
        position: absolute;
        left: 0;
        top: -10;
        width: 100%;
    }
}

I based my solution off the code presented here: https://css-tricks.com/forums/topic/any-ideas-for-firefox-column-span-solution/. You can try using top: 0 but I made the value negative because top: 0 caused the element to appear at the very top of the page instead of below the two columns as I intended (which any negative value seemed to fix).