Failure to display 3 sections side-by-side

Question

I have the following snippet of HTML in my README.MD file on GitHub:

<footer>
<p style="float:left; width: 20%;">
Copyright © Jonathan Gossage, 2018
</p>
<p style="float:left; width: 60%; text-align:center;">
<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>
</p>
<p style="float:left; width: 20%;">
Email addresses will be added when they are setup.
</p>
</footer>

This code is intended to display 3 sections side-by-side in an HTML footer. This code works in the preview window of my Markdown editor and it woks when placed in a standard HTML document and displayed by Google Chrome.

Unfortunately when GitHub renders the code to HTML the footer get displayed with the three sections displayed vertically. I tried this also using <div> instead of <footer> with the same result.

Can anyone suggest how I can display these sections side-by-side in a GitHub README.MD file?

score 0 · Answer 1 · answered Mar 03 '18 at 16:21

GitHub strips several tags and attributes, including inline styles, from HTML as part of its processing of Markdown files:

The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes. See the sanitization filter for the full whitelist.

As far as I know there is no way to render content in columns in README.md files other than to use tables.

See also How to render multiple columns with Markdown in GitHub README?

Failure to display 3 sections side-by-side

1 Answers1