Finally! Getting Images to Sit Side-by-Side in WordPress

Have you ever tried to get two images to sit side-by-side in WordPress? Did it drive you crazy? If so, you’re not alone. It’s driven me crazy a number of times.

The good news is, it might not be as maddening now as it was in the past.

The bad news is, the good news above might not actually apply in your case.

Not to worry though, there’s more good news – we’ve got alternative methods below if the easiest methods don’t happen to work for you.

4 Different Methods for Side-by-Side Images
The Do Nothing Method
Built In Method
Manual CSS Method
Use Columns

Messed Up Images in Your Editor

4 Different Methods for Side-by-Side Images

We’ve got four basic methods for you.

The first and second methods below, while the easiest, never really used to work in WordPress, and even now they may not work for some.

And so we will give you some alternative methods.

As well, you can gain more control with these alternative methods, and so you may even want to opt for those solutions to begin with.

1. The Do Nothing Method

Obviously, it doesn’t get any easier than doing nothing, and that’s what this method entails.

Simply put your images into your editor side by side.

If this method works for you (it may not), then the images will come out side-by-side as below. Notice that there is no space between the images.

As mentioned above, this simple method never seemed to work before. Or at least it never did whenever I tried it. And it never worked for anyone I knew either. So I’m guessing it wasn’t supposed to.

Recently, however, it did actually work for me. And so maybe something was improved. Or maybe the themes I tried it on were just more flexible. (I tried it on several.)

I’m not really sure. And it doesn’t really matter.

If it works for you, then it works. If it doesn’t, I wouldn’t spend a lot of time worrying about it. Simply move on to another method.

2. Built In Method

We’ll call this one the Built In Method. It’s only slightly more complicated than the first method, but as long as the size of your images allow for it, it should put some space between the images instead of running them together. (Maybe too much space. We’ll deal with that later.)

Simply put, you can align images via WordPress itself by clicking a button or choosing an option.

There are two ways to achieve this.

a. Buttons on Editor

After your images are imported into your editor, simply use the align button in the visual editor mode. Use left-align for the first image and right-align for the second image.

b. Options in Media Library

You can do essentially the same thing through options in the media library. When you click on the media button in the editor in order to import your pictures into the post, before you insert them, you will notice some options near the bottom on the right hand side.

Choose left-align for the first image and right-align for the second image.

Whether you choose the first or the second method above, your images should come out something like the following.

You’ll notice that there’s a fair amount of space between the two images. The amount of space will be determined by the size of your images. Obviously, the smaller they are, the more space there will be between them. (Also, of course, if they are too large, then they won’t have enough space to fit side-by-side.)

Once again, even if your images are small enough, there’s a chance that something just won’t work right for you with this method. If so, don’t curse it. Just move on.

3. Manual CSS Method

As the name indicates, this method will have you manually inserting some CSS code. This method will also give you more control in terms of how much space goes between your images.

There are actually a number of ways to achieve this method as well. We’ll go over two options.

a. In-Line CSS

With this method you put the CSS style right into the image code.

Go to the “Text” tab in your editor (the HTML code section), and find the code for your already inserted images.

More than likely, there will be two parts for each image. You will have the code that links it. It will start like this:

<a href=»http://mysite.com/uncat …. >

And then you will have the code that pulls the image in. It will start with like this:

<img …. >

In that second section after the img, put the following CSS code in

style=»float: left; margin-right: 5px;»

Altogether, it should look like this:

<img style=»float: left; margin-right: 5px;» ….

This will push the image to the left and give you 5px of space out to the right of the image. You can increase that if you like.

Do the exact same to the second image. If you float this one left too, it will line it up beside the first one. But as the first one has a 5px margin (or more if you changed it), then it won’t run right up against it.

The final product should look something like this (again, all depending on the size of your images).

b. Using a Div with CSS

Another similar option is to use CSS, but instead of putting the code into the image code itself, you wrap each image with a div, and then you style the div in your Stylesheet.

First, create a unique “class” name for your div, maybe something like “side-by-side.” Then wrap the code for the first image like this:

<div class=»side-by-side»>
<a href=»http://mysite.com ….>  (include ALL the code for the image here)
</div>

Do the same for the second image.

Now we’re going to create the style for that “side-by-side” class by going to the CSS file in your theme. (Appearance > Editor > Stylesheet – css.style)

Of course it’s always a good idea to create a child theme if you’re going to start permanently changing things.

Place the following code in your style sheet.

.side-by-side { float: left; margin-right: 5px }

And that’s it. You should get a result as in the section above.

4. Use Columns

The final method is to use a column plugin.

A column plugin will let you divide your post up into different columns – for example two columns that are each half of the post. Or you might divide it up into two columns where one is one-third the width and the other is two-thirds the width, etc.

There are a number of column plugins out there. Shortcodes Ultimate plugin is one, for example.

Once the plugin is installed, you can, for example, lay out two columns via shortcode. Each column will take up half the space.

In the example below, you would put each image where it says “…image here ….”

[one_half] … image here … [/one_half]
[one_half] … image here … [/one_half]

For example, here’s one image inside the shortcodes.

Do the second image the same way.

And, of course, the result is your two images side-by-side.

Messed Up Images in Your Editor

One thing to be aware of is that you may find that your images look messed up in various sorts of ways with some of the solutions above.

There’s not really any solution for that. As long as they turn out OK on the frontend of the site, that’s what matter.

I would, however, check things in various browsers. Also, of course, you may want to see how things look on mobile devices too.

A lot of things, including your theme, can play into the final result of your published page.

Hopefully, however, at least one of the solutions above will work for you, and the maddening days of simply trying to get images to sit side-by-side will be over.