Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to align images side by side with CSS?
To align images side by side, we can use the float property in CSS. With that, flex also allows us to align images. Let us understand them one by one with examples beginning with aligning images side by side with the float property.
Syntax
/* Using Float */
.image-container {
float: left;
width: value;
}
/* Using Flexbox */
.container {
display: flex;
justify-content: value;
}
Method 1: Align Images Side by Side With Float
We can float elements like images with CSS float property to either the left or right of the containing parent element. Other elements are placed around the floated content. Multiple elements with same value of float property enabled are all placed adjacently.
In this example, the image is placed on the left using the float property with the value left. Since all the images are set float: left therefore it gets arranged side by side −
Example
The following is the code to align images side by side with float −
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.imageColumn {
float: left;
width: 25%;
padding: 10px;
}
h1 {
text-align: center;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h1>Images Aligned Side by Side with Float</h1>
<div class="clearfix">
<div class="imageColumn">
<img src="/images/clipart/flow/flow4.jpg" alt="Leaf" style="width:100%">
</div>
<div class="imageColumn">
<img src="/images/clipart/cartoon/cartoon2.jpg" alt="Cartoon" style="width:100%">
</div>
<div class="imageColumn">
<img src="/images/clipart/animal/animal9.jpg" alt="Animal" style="width:100%">
</div>
<div class="imageColumn">
<img src="/images/clipart/sport/sport11.jpg" alt="Sports" style="width:100%">
</div>
</div>
</body>
</html>
Four images are displayed horizontally in a row, each taking 25% width with 10px padding around them.
Method 2: Align Images Side by Side With Flexbox
To align images side by side, use the display property in CSS and set it to flex. The alignment is set using the justify-content property with value center. Flexbox provides better control and responsiveness compared to floats.
Example
Let us see an example to align images side by side with flex −
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
justify-content: center;
gap: 20px;
}
img {
width: 150px;
height: 100px;
object-fit: cover;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>Images Aligned Side by Side with Flexbox</h1>
<div class="flex-container">
<img src="/jsf/images/jsf-mini-logo.jpg" alt="JSF Logo" />
<img src="/cprogramming/images/c-mini-logo.jpg" alt="C Logo" />
<img src="/cplusplus/images/cpp-mini-logo.jpg" alt="C++ Logo" />
</div>
</body>
</html>
Three images are displayed horizontally in a centered row with equal spacing between them.
Key Differences
| Property | Float Method | Flexbox Method |
|---|---|---|
| Responsiveness | Limited | Excellent |
| Alignment Control | Basic | Advanced |
| Clearfix Required | Yes | No |
Conclusion
Both float and flexbox methods can align images side by side effectively. However, flexbox is the modern approach offering better responsiveness and alignment control, making it the preferred choice for contemporary web development.
5K+ Views
