Why do separate columns in a three column layout render on separate lines when exported to HTML?

[Brian Voorhees]

We write a user guide for our product in our Confluence space and then export it to HTML for our clients to view and use. We have a footer on each page that is a three column layout that acts as a navigation bar. A link to the previous page is on the left, a link to the table of contents is in the center, and the next page is on the right. This footer renders all on the same line in Confluence, but when we export the guide pages to HTML, the links all appear to render on separate lines. Below is a sample footer as rendered in Confluence edit mode, and then as it is rendered in the exported HTML, and finally how it renders on the published Confluence  page.

Here is the relevant exported HTML for further reference:

<div class="columnLayout three-equal" data-layout="three-equal">
<div class="cell normal" data-type="normal">
<div class="innerCell">
<p><a href="Navigation-Bar_4456534.html">&lt;- Navigation Bar</a></p></div>
</div>
<div class="cell normal" data-type="normal">
<div class="innerCell">
<p style="text-align: center;"><a href="index.html">--- User Guide</a></p></div>
</div>
<div class="cell normal" data-type="normal">
<div class="innerCell">
<p style="text-align: right;"><a href="Dashboard_4456504.html">Dashboard -&gt;</a></p></div>
</div>

[Zak Laughton · Accepted solution]

Hi Brian!

I was able to reproduce the behavior you described, and I logged it as a bug with our developer team here: CONFSERVER-56210.

It looks like any multi-column page layout section in Confluence will be exported with the sections on separate lines, instead of side-by-side.

As a workaround, I was able to fix this by adding the following to the end of the styles/site.css file in the HTML export:

.columnLayout {
 display: flex;
}

.cell {
 flex: auto;
}

(More info on the flex property here: A Complete Guide to Flexbox)

I hope this helps!
-Zak

[Brian Voorhees]

Thanks Zak! The workaround CSS worked for me.