Home » CSS

How to align images side by side with CSS?

In this tutorial, we will learn how to align images side by side with CSS? By Apurva Mathur Last updated : July 25, 2023

Images are used for all kinds of reasons: to enhance websites, to illustrate stories, in ad displays, to present products or services, as stand-alone "a picture is worth a thousand words" meaning-rich tools, and sure, on social media. We can use many pictures on a webpage.

Aligning images side by side with CSS

To align images side by side, you can use the CSS float property and keep the images in the different div containers. The CSS float property defines the location of the HTML element. It shifts the element to the right side or the left side (According to the preference).

Example to align images side by side using CSS

<!DOCTYPE html>
<html>
   <head>
      <style>
         .images {
         float: left;
         width: 25%;
         padding: 10px;
         }
      </style>
   </head>
   <body>
      <div>
         <div class="images">
            <img src="https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg" alt="Snow" style="width:100%">
         </div>
         <div class="images">
            <img src="https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg" alt="Snow" style="width:100%">
         </div>
         <div class="images">
            <img src="https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg" alt="Snow" style="width:100%">
         </div>
      </div>
   </body>
</html>

Output

CSS Examples »

How to create a search button with CSS?

How to create rounded and circular images with CSS?