Flow text around an image in (GitHub) Markdown

GithubMarkdown

Github Problem Overview


I have a narrow long image that I want to display at the top right of a README.md file on GitHub. I have been trying several things to get it aligned right and currently have

<p align="right">
  <img src="doc/subpagelist.png" />
</p>

This works in that the image is aligned on the right side, though is rather useless as all content that is below in image in the Markdown file gets displayed under the bottom of the image, rather then to the left of it.

Is there a way to have the text flow around the image (without getting rid of headers and paragraphs)?

Github Solutions


Solution 1 - Github

The align="right" (or left) attribute works in GitHub Markdown:

<img align="right" src="doc/subpagelist.png">

Solution 2 - Github

It works for me (only for jekyll, it does not work for Github markdown): Put the code below in your content markdown (I have put it on the first line for better organization)


    <style type="text/css">
    .image-left {
      display: block;
      margin-left: auto;
      margin-right: auto;
      float: right;
    }
    </style>

And refers to your image as follows: [![Proguard](./proguard-snippets.png)](http://www.thiengo.com.br/proguard-android){: .image-left } Your Text comes here...

Note the .image-left class besides the image url.

The final results are here: Movies of the Year jekyll github page

Solution 3 - Github

align="left" works fine. To break the alignment again, use a <br clear="left"/> (or <br clear="right"/>) tag:

<img src="/path/to/image.png" align="left" width="200px"/>
some text floating around the image

<br clear="left"/>

A "newline". This text doesn't float anymore, is left-aligned.

Solution 4 - Github

In markdown you can add extra attributes to tags. For instance I use this for what you intend to do:

![Some Title](http://placehold.it/image.jpeg){:style="float: right;margin-right: 7px;margin-top: 7px;"}

Solution 5 - Github

What you are describing is "floating" of an image, which allows text to flow around it. There are a number of good turtorials about floating in CSS if you want to learn more about this topic. In the mean time, to get an image to float in Markdown you can wrap the image in a div and float that div using:

<div style="float: right">
    ![Replace this with your image](http://placehold.it/85x85 "Title")
</div>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJeroen De DauwView Question on Stackoverflow
Solution 1 - GithubJo LissView Answer on Stackoverflow
Solution 2 - GithubRichard LeeView Answer on Stackoverflow
Solution 3 - GithubNico SchlömerView Answer on Stackoverflow
Solution 4 - GithubBert RaeymaekersView Answer on Stackoverflow
Solution 5 - GithubChrisView Answer on Stackoverflow