Hello there fellow Steemians! How are you doing? Ready to learn something useful today? In this short article, I'm going to show you how to make floating images like this one on the right. With a right use of these, you can make your blog look visually better than ever! I saw very few bloggers around steemit that use this feature. This is a unique opportunity that can give you a chance to get ahead of your competition! We work inside the HTML code here so take a note that text you enter will not support markdown. What does that mean? If you want to make words bold inside this code you can't use markdown and type ** but you must use the < b > command. When it comes to applying this code - feel free to do copy paste of it, then enter your image link inside first brackets. Afterward, you need to write your text just like you normally would in second brackets. Notice also that there is pull-right inside a code. If we want to pull image left, we will simply change it to pull-left.

<p>
<div class="pull-right">
(img link)
</div>
(your text)
</P>

OR

<p>
<div class="pull-left">
(img link)
</div>
(your text)
</P>

If you want to make this code little bit more advanced, you can apply knowledge from my previous post about Both Side Alligment. However, to show you the effect of Both Side Alignment, I applied it in the first part of my article. Scroll up there and see how my upper text is so neat and well structured. I want you to know that it's possible to mix more codes into one that will do miracles. For this example, just enter this code below inside our Floating Images code.

<div class="text-justify">
(your text)
</div>

This code below is a mix of Floating Images and Both Side Alignment code. You only need to copy and paste this into your editor. After that, enter URL of your image and type your desired text. That's it! And remember to use only HTML code inside this, because markdown codes won't work.

<p>
<div class="pull-left/right">
(img link)
</div>
<div class="text-justify">
(your text)
</div>
</P>

Feel free to check my other articles too:
How to Credit Your Images
How to Resize Your Images

And my best article so far:
5 Tips to Learn Anything Better

<sub>Gif source

Image sources: 1, 2</sub>