How to align images side by side

Learn how to align images side by side using CSS.

How to Place Images Side by Side

Step 1 - Add HTML:

<div class="row">
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

Step 2 - Add CSS:

How to Use CSS float Properties to create side-by-side images:

Floating Example

/* Three image containers (four image containers use 25%, two image containers use 50%, etc.) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* Clear floating after the image container */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Try It Yourself

How to Use CSS flex Properties to create side-by-side images:

Flexible Box Example

.row {
  display: flex;
}
.column {
  flex: 33.33%;
  padding: 5px;
}

Try It Yourself

Note:Flexbox does not support Internet Explorer 10 and earlier versions. Whether to use float or flex to create a three-column layout depends on you. However, if you need to support IE10 and lower versions, you should use floating.

Tip:For more information about the flexible box layout module, please read our CSS Flexbox Tutorial.

Add Responsiveness

Alternatively, you can add a media query to stack images at a specific screen width instead of side by side.

The following example will stack images vertically on screens with a width of 500px or less:

Responsive Example

/* Responsive Layout - Make three columns stack instead of side by side */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

Try It Yourself

For more information about media queries, please read our CSS Media Query Tutorial.

Related Pages

Tutorial:CSS Image

Tutorial:CSS Floating

Tutorial:CSS Image Gallery