<center>https://steemitimages.com/DQmXZsEBVDiDHWCsNBQFHNxyz91SuY96jTD4DrxCETjRP4i/steem%20copy.jpg</center>

# <center>How to Place Your Images Side by Side in a Steemit Post</center>
___

Yesterday I made a quick little post with several pictures in it.  I tinkered around with the markdown code to get several of them lined up horizontally.  That was a chore for someone new to HTML!

I had everything nice and ordered .....it looked perfect! 

When I hit the post button all my pictures were scrambled and text was scattered all over the place!

It took me several hours to rearrange things so that it was presentable to the public.

## <center> Do you know what I discovered?</center>
___

The _**editor preview**_ window isn't the same size as the _**posting**_ window!!!

My code was okay, my image sizes were off!

I spent two hours resizing and testing and testing again before I finally to got things correct!

The pixel width of the _**posting**_ window is 630 pixels wide!  Exceed this and your project is ruined!

This is the code I worked out to display pictures three across.
___

    <div class="pull-left">Image here 
    Image here
    Image here</dev>


I used my preview software on my MacBook Pro to resize the images to 210 pixels wide. They should look like this in your blog.

<div class="pull-left">https://steemitimages.com/DQmdKzMxHYSy4qCnHrTybeBnkTPJjgWqUijYFz5xCeTQph4/IMG_1187.jpg
  https://steemitimages.com/DQmdKzMxHYSy4qCnHrTybeBnkTPJjgWqUijYFz5xCeTQph4/IMG_1187.jpg
  https://steemitimages.com/DQmdKzMxHYSy4qCnHrTybeBnkTPJjgWqUijYFz5xCeTQph4/IMG_1187.jpg</dev>



___
The code will look something like this with your image files loaded. Be sure to strip out everything but the necessary elements of the image file, i.e. everything before the 'https' and delete the last parenthesis')' too.


    <div class="pull-left">https://steemitimages.com/DQmdKzMxHYSy4qCnHrTybeBnkTPJjgWqUijYFz5xCeTQph4/IMG_1187.jpg
      https://steemitimages.com/DQmdKzMxHYSy4qCnHrTybeBnkTPJjgWqUijYFz5xCeTQph4/IMG_1187.jpg
      https://steemitimages.com/DQmdKzMxHYSy4qCnHrTybeBnkTPJjgWqUijYFz5xCeTQph4/IMG_1187.jpg</dev>

## <center>Use this code to align two different sized images!</center>
___

The first image is 420 pixels wide and the second is 210 pixels wide.  Together they are 630 pixels, the limit of the Post window.

<div class="pull-left">https://steemitimages.com/DQmcgYQtUiAZSJrodAusd2qmqepxJYR6pQBR3yAAeoPJvrP/IMG_1213.jpg https://steemitimages.com/DQmdKzMxHYSy4qCnHrTybeBnkTPJjgWqUijYFz5xCeTQph4/IMG_1187.jpg
</dev>

___
This is the code I used for this effect.

    <div class="pull-left">Image here 
    Image here
    </dev>
___

I'm assuming you can align any  number of images as long as they don't exceed the 630 pixel limit.
I've been toying with centering captions under each image but haven't had much success yet.  

### <center>Update: </center>
##### <center>This will not appear correctly in a phone browser! I'm still working on that problem!</center>

<center>Helpful comments appreciated.

Thanks for reading!  

CARRY ON!</center>
<center>https://steemitimages.com/0x0/https://steemitimages.com/DQmXmdadCYFMH2MEcHc92CYHHhVCUyCzqEUw4V3GXxWUosF/bar1.PNG</center></center> 
https://steemitimages.com/0x0/http://brandonfrye.biz/wp-content/uploads/steem.gif 
<center> 

<a href="https://steemit.com/homesteading/@beekerst/improving-the-homestead-or-a-ride-through-the-empire"><img src="http://i.imgur.com/sK3LEbt.gif"/></a> 

<a href="https://steemit.com/story/@beekerst/legends-of-the-louisiana-swamp-lands"><img src="http://i.imgur.com/9IsAlFg.gif"/></a>


<center>https://steemitimages.com/0x0/https://steemitimages.com/DQmXmdadCYFMH2MEcHc92CYHHhVCUyCzqEUw4V3GXxWUosF/bar1.PNG</center>