How To Put Pictures Side By Side

Most people don’t realize how often we scroll past side-by-side images without even thinking about the work behind them. But once you try doing it yourself—whether for a blog, an online store, a school project, or social media—you’ll find it’s not always as simple as dragging and dropping.

How to put pictures side by side? Here’s the short answer: You line them up using the right method for the platform you’re working with—HTML and CSS for websites, tables for documents, drag-and-drop tools for design platforms, or built-in layout settings in editors like Word or Canva. But there’s more than one way to do it, and choosing the right one saves you time, keeps things neat, and helps your content actually look how you want it to.

Let’s unpack how to do this properly across different platforms, without getting lost in a maze of techy instructions.

Know What You’re Working With

Before we even touch the tools, you need to know where you’re putting the pictures. That sets the rules.

Different platforms have different layout systems. What works in Google Docs won’t always work in HTML. What looks perfect on Canva might break apart on WordPress.

Always match your method to your platform. That one step can save you hours of back-and-forth fixing later on.

Why Side-by-Side Photos Matter

  • They tell a stronger story. Think before-and-after photos, comparisons, timelines.
  • They save space without crowding your design.
  • They’re more scroll-friendly, especially on mobile.

But if you throw them together carelessly, the alignment gets messy, the sizes get weird, and your viewer ends up confused instead of impressed.

For Websites: HTML and CSS

If you’re dealing with your own website or editing a custom blog theme, HTML and CSS give you full control.

Method 1: Using Flexbox

Flexbox is great for responsive layouts. It keeps things tidy, even on different screen sizes.

<div style="display: flex; gap: 10px;">
  <img src="image1.jpg" alt="First Image" width="300">
  <img src="image2.jpg" alt="Second Image" width="300">
</div>
  • display: flex puts items in a row.
  • gap: 10px adds space between them.
  • Use width in pixels or percentages, just keep them equal for balance.

This works on most devices without extra code. It also adjusts nicely when screen sizes change.

Method 2: Using Tables (Old but Useful)

Tables are considered old-school, but sometimes they’re easier—especially in emails.

<table>
  <tr>
    <td><img src="image1.jpg" alt="Image 1" width="300"></td>
    <td><img src="image2.jpg" alt="Image 2" width="300"></td>
  </tr>
</table>

This method is static. It won’t adjust well to different screen sizes, but it’s reliable in email formatting or plain-text editors.

For Documents: Word, Google Docs, and More

You don’t need fancy code to place pictures side by side in Word or Docs—but you do need to avoid the trap of dragging and hoping for the best.

Microsoft Word

  • Insert your pictures one by one.
  • Click on the first image. Under Wrap Text, choose Square.
  • Repeat for the second image.
  • Drag them next to each other. Use the arrow keys if they don’t line up right.
  • Group them to move them together later.

If you need more control, use a table with no borders:

  • Insert a 1×2 table.
  • Drop an image into each cell.
  • Right-click the table → Table Properties → Remove borders.

Google Docs

Google Docs isn’t built for perfect layout work, but there’s a simple fix.

  • Insert a Drawing (Insert → Drawing → New).
  • In the Drawing panel, add two images.
  • Place them side by side inside the drawing canvas.
  • Click “Save and Close” to insert into the doc.

This locks them into place as one single image—less editing stress.

For Design Tools: Canva, Figma, Photoshop

These platforms are made for creative control. You don’t need code here, but you do need to know how to make the layout clean.

Canva

  • Create a blank canvas or use a template.
  • Add two image frames next to each other.
  • Drop your photos into the frames.
  • Use alignment guides (pink lines) to center them evenly.
  • Group them if needed.

You can also use a grid. Just pick a two-column layout from the Elements tab and adjust as needed.

Figma

Figma gives you more flexibility and is great for web or app UI design.

  • Use a frame or auto-layout container.
  • Drop in your images.
  • Use spacing controls to fine-tune alignment.
  • Resize with pixel precision.

This setup keeps everything responsive if you need to export it for different screens or platforms.

Photoshop

Photoshop gives you full freedom, but things can get messy if you don’t use layers well.

  • Open a new file with your preferred dimensions.
  • Drag each image into the project—they’ll each be on a new layer.
  • Use the Move Tool to position them side by side.
  • Use Guides (View → New Guide) to make sure they’re aligned perfectly.

Then export as one image to keep everything in place.

For Blogs and Content Editors

WordPress, Squarespace, or Medium? These usually have drag-and-drop blocks or custom options for images.

WordPress (Block Editor)

  • Add a Gallery block or use Columns.
  • Drop one photo in each block.
  • Resize each block to match.
  • Add spacing with the block settings or padding controls.

Classic Editor? Use a table or insert HTML with Flexbox (if allowed by your theme).

Medium

Medium doesn’t allow much layout freedom. But here’s a trick:

  • Upload both images.
  • Resize them to about 50% width.
  • Use left and right alignment.

This will create a pseudo-side-by-side layout. It’s a workaround, but it works if you keep your image widths small.

Squarespace

  • Add a new Image Block.
  • Choose Inline or use a Grid Layout.
  • Add a Spacer between the images for more control.
  • Use the Mobile Preview to make sure it looks okay on small screens.

Tools That Help You Do It Faster

Some tools do the job without all the manual fuss.

  • Kapwing – Easy side-by-side image creator, no install needed.
  • PhotoJoiner – Collage tool with clean layout options.
  • PineTools – Drag, drop, export. Simple and fast.

These are helpful for social media posts or sending quick side-by-side comparisons.

Common Mistakes That Mess It Up

Even with the right tools, there are traps that mess up your layout.

Inconsistent Sizes

Make sure your images are roughly the same height or width. Otherwise, one might overpower the other or break the line.

Poor Alignment

Without using guides or auto-layout, things can get sloppy fast. Always check your spacing and symmetry.

Too Many Images

Stick to two, maybe three. More than that starts to look like a collage. If that’s your goal, great. If not, keep it simple.

Forgetting Mobile

Just because it looks good on your screen doesn’t mean it’ll work on a phone. Always test it on smaller screens before publishing.

Final Thoughts

How to put pictures side by side sounds like a small thing, but it changes how your content flows, reads, and feels. Whether you’re writing, designing, or building something online, getting your images lined up right makes everything cleaner and more connected.

The best method depends on your platform. Sometimes it’s code, sometimes it’s just the right click. But what matters is using the right trick for the job—not forcing it.

Try a few different setups. See what clicks. Once you find your rhythm, laying out your visuals becomes second nature. And your content? It’ll look like it was done by someone who actually knows what they’re doing—because now, that’s you.