Floating images in Github Readme

Question

How would I go about doing this? Putting the following code into the Markdown generator gives me the desired output

<div style="float: left"><img src="http://ompldr.org/vaDU5NQ/scrotter.png"/>
</div>
I'm trying not to, kid. Don't act so surprised, Your Highness. You weren't
on any mercy mission this time. Several transmissions were beamed to this
ship by Rebel spies. I want to know what happened to the plans they sent
you. Kid, I've flown from one side of this galaxy to the other.

I've seen a lot of strange stuff, but I've never seen anything to make me
believe there's one all-powerful Force controlling everything.

However, adding this code to my README.md file makes it an inline image instead of floating.

How could I work around this? Is it a Github bug?

score 82 · Accepted Answer · answered Mar 17 '16 at 20:15

82

I know this thread's old, but for anyone interested, you can use <img align="left" src="img.jpg"> and <img align="right" src="img.jpg"> to float images on GitHub.

answered Mar 17 '16 at 20:15

Paul Shryock

1,309
11
17

It works, but is old-style HTML (not supported in HTML5). Unfortunately, there is no way to customize image floating that conforms to both HTML5 and GFM at the same time. – Marc Sigrist Nov 10 '19 at 13:14
1

I don't think Markdown in a GitHub ReadMe needs to validate as HTML5. It's for documenting a code repository; not for being a website. – Paul Shryock Apr 11 '20 at 21:12
is there a `float: clear` equivalent, too? – Martin Rauscher Feb 09 '21 at 09:07
@MartinRauscher I don't think so. – Paul Shryock May 30 '21 at 18:35

score 2 · Answer 2 · answered Jan 20 '13 at 18:02

2

I believe it is a security issue with GitHub. My understanding is they strip all HTML attributes such as style with the execption of perhaps href.

answered Jan 20 '13 at 18:02

Zombo

1
62
391
407

2

Old question but I ended up using gh-pages instead of my readme file, because it's just a much better way of doing things - gh-pages isn't restricted by this, and behaves like a normal html page. – yttrium May 03 '13 at 17:06

Floating images in Github Readme

2 Answers2