How To Wrap Text Around Images In Steemit

Steemit's post editor is relatively straight forward to use, the styling guide link at the top right of the main text area even provides us with some handy instructions on how to format headers, lists, and tables using Markdown.

What is Markdown?

Markdown is a text to HMTL conversion syntax, that converts text to structured HTML, the standard language used to create webpages.

Limitations of Markdown

Because Markdown concerns itself with coverting text to structured HTML, and not with webpage layout, it is not possible to use Markdown to wrap text around images.

HTML To The Rescue

Instead, to achieve this layout we need to do two things:

1. Use HTML to embed the image.
2. Wrap the image in an element to float it left or right on the page.

Lets get started:

First drag an image into your post editor, you should end up with a string of code that looks something like this:

![steemit-logo.png](https://steemitimages.com/DQmdEC/steemit-logo.png)

Great, now that your image is hosted on Steemit's server, lets change that code and use HTML to embed the image rather than Markdown:

1. Remove ![steemit-logo.png]( from before the image URL.
2. Remove ) from after the image URL.
3. Add <img src=" before the image URL.
4. Add " /> after the image URL.

Our image embed code should now look like this:

<img src="https://steemitimages.com/DQmdEC/steemit-logo.png" />

Your image should now be visible in the post preview section, but we still need to apply a CSS class to the image to align it left or right, and allow text to fill the empty space around the image. To do this we wrap the image in a div, and give that div a class which references a predefined style in Steemit's CSS style Sheet.

---

CSS Classes
To align images left, use:	pull-left
To align images right, use:	pull-right

---

Lets assume we want the image on the right side of our post, to achieve this we would add:

<div class="pull-right">

To the beginning of our image embed code, then we would add:

</div>

To the end of our image embed code, the final embed code should look like this:

<div class="pull-right"><img src="https://steemitimages.com/DQmdEC/steemit-logo.png" /></div>

---

Awesome! Now our image is aligned to the right hand side of the page, and our text (which is typed after the image embed code) wraps nicely around it to fill the empty space!

I normally resize my images before uploading them if I am going to use this layout technique. Giving them a width of 390 pixels seems to work well.

You can float images alternately left and right to achieve a grid style layout, though if you do not add enough text to each section your images may overlap, breaking the layout. If this happens try using:

<div class="clear"></div> before the embed code for each image.

---

Nick Davison is a creative marketer and business owner who loves to write about a range of topics including food, nature, and crypto currencies.

---