zaro

How do I put pictures next to each other in CSS?

Published in CSS Image Alignment 1 min read

You can put pictures next to each other in CSS using several methods, but one traditional approach involves using the float property.

Using the float Property

The float property lets you position elements (like images) side by side by floating them to the left or right.

Here's how you can do it:

  1. Apply float: left; to each image: This will cause the images to align to the left and wrap next to each other.

    <img src="image1.jpg" style="float: left;">
    <img src="image2.jpg" style="float: left;">
    <img src="image3.jpg" style="float: left;">
  2. Clear the float: After the images, you might need to clear the float to prevent subsequent elements from wrapping around the images. You can do this by adding an element with the clear: both; property.

    <div style="clear: both;"></div>

Example: Aligning Images Side by Side using float Property

<!DOCTYPE html>
<html>
<head>
<title>Align Images Side By Side</title>
<style>
img {
  float: left;
  margin-right: 10px; /* Optional: Add some spacing between images */
}
.clearfix {
  clear: both;
}
</style>
</head>
<body>

<img src="image1.jpg" alt="Image 1" width="200" height="150">
<img src="image2.jpg" alt="Image 2" width="200" height="150">
<img src="image3.jpg" alt="Image 3" width="200" height="150">

<div class="clearfix"></div>

<p>This is some text that will appear below the images.</p>

</body>
</html>

In this example:

  • Each img tag has float: left; applied to it.
  • margin-right adds some space between the images (optional).
  • .clearfix is a class used to clear the floats after the images.

By using the float property, you can effectively display images next to each other in your CSS layout.