Display Wordpress Images Side By Side

This video will show you how to display your WordPress images side by side instead of the default up and down.

You may notice I added some coding, this is so you can create as much or as little space between the images as you'd like. for example you can change the 1px on each line to 3px. This will increase the space between each image. The larger the number, the greater the space.

Here is the code I used:
***NOTE: Youtube wouldn't let me place the code as is, so I had to mod it a bit.

*Replace all "11's" with "less than symbol" (shift + comma key)
*Replace all "22's" with "greater than symbol" (shift + period key)

11div style = "text-align:center"22
11div style="display: inline-block; margin-right: 1px"22
[YOUR FIRST WORDPRESS CAPTIONED IMAGE]
11/div22

11div style="display: inline-block; margin-right: 1px"22
[YOUR MIDDLE WORDPRESS CAPTIONED IMAGES]
11/div22

11div style="display: inline-block; margin-right: 1px"22
[YOUR LAST WORDPRESS CAPTIONED IMAGE]
11/div22
11/div22

[Ky_L]

I basically just spent almost 5 hours fighting a nasty fight with picture alignment for a job.... YOU SAVED my new HERO!! This has just solved all my problems, this was the only thing that helped with my problem of table scaling on the mobile version!!!!Thank you so much, bless you!!!! regards, yours desperate nerd

[srbjwe]

Thanks for the side-by-side instructions. I had been looking around for how to do this for a while ... nice to have the answer! 

[jessacton]

THANK YOU SO MUCH! I'm making a lil archives for my blog and I couldn't find easy instructions for how to do this anywhere else. You're a life saver!

[jenmolon]

Easiest of all how-to's I ever found on the web! You saved me a lot of Thank you!!! :)))

[Rbbrt]

I've been looking for this for at least a week now Thanks!

[katyyung]

THANK YOU for this video. It saved me many more hours trying to figure this out. This should have been my first stop.

[tonyguarino]

Div with the inline-block did the trick. In WordPress, I was trying to align images with a table and it was working great, until I shrunk the window. This mimics the responsive quality and it was overlaying the sidebar on the right side of the page. This way with divs moves the images down as the window gets smaller.
Also, using Div without the extra code, the text kept creeping up on the right side. Now the text does not and stays below the images and the page looks good.
I made captioned image button links so it would look good on either desktop, tablet, or phone and be responsive to all sizes. Works great.

Thank you!

[sibeans]

I've been looking for this for hours! You have no idea how much this helped me. :D

[bridgetstoker]

Thank you for this easy to understand tutorial! I was able to place my social icons side-by-side and placed the code in a widget. Because of this, I was able to delete the social icons plug-in. Yay!

[ArtIsInFormation]

Finally!! Came through when so many others didn't.

[candicebobchak]

Thank you so much. I am new to wordpress and you saved my internship.

[PaulSauve]

I had done this previously by inserting a table. This is much more elegant.

Thanks

[PinayNomad]

wow! I tried many tutorials and this is the only one that worked! Thanks man! :)

[SimpleHowz]

@Christoffer Sylvest Carlsen: Great question! Simply take out the margin-right: 5px on the second line above the very first caption. You could also leave the margin-right: 5px where it is, and add just the 5px to every line you inserted above all the captions below the first caption. You can change the number 5 to whatever number you'd like, to make the space larger or smaller. Just make sure whatever number you choose, is the same on the first line above every caption. Hope this helps
-CHRIS

[diegoconsimo]

Thank you so much!!! i didnt find this code in anyplace! Great job!

[SimpleHowz]

@A TL Group: Think of HTML as a sandwich, the very first "div" at the top of the very first caption, is the top slice of bread. All the "div's" in between for each caption, simply closes out that individual caption. The very, very last "div" in the code, is the bottom slice of bread, trapping all the good stuff in between making the sandwich complete.

[grumbler]

beautiful. thank you very much. i knew there had to be a simpler solution than making those tables.

[richbykerk]

Got a question. Where did you go to find the coding? I pressed enter 3 times after each caption, but where you lost me is where you clicked something at the bottom of the screen and the coding came up. Right at 1:23 in your video

[Liladylala]

Thank you!! This was so helpful and efficient :D

[christoffersylvestcarlsen]

Great video - this really helped me! But can you somehow explain me, how I can get rid of that extra space between the first and second picture? I can see you have it aswell at 4:59