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

Example: Align images side by side

CSS Examples »



Comments and Discussions!

Load comments ↻





Copyright © 2024 www.includehelp.com. All rights reserved.