How TO – Align Images Side By Side
Learn how to align images side by side with CSS.
Images Side by Side
How to create side-by-side images with the CSS float property:
Example
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: “”;
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Images Side by Side</h2>
<p>How to create side-by-side images with the CSS float property:</p>
<div>
<div>
<img src=”img_snow.jpg” alt=”Snow” style=”width:100%”>
</div>
<div>
<img src=”img_forest.jpg” alt=”Forest” style=”width:100%”>
</div>
<div>
<img src=”img_mountains.jpg” alt=”Mountains” style=”width:100%”>
</div>
</div>
</body>
</html>
How To Place Images Side by Side
Step 1) Add HTML:
Example
<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 create side-by-side images with the CSS float property:
Float Example
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: “”;
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Images Side by Side</h2>
<p>How to create side-by-side images with the CSS float property:</p>
<div>
<div>
<img src=”img_snow.jpg” alt=”Snow” style=”width:100%”>
</div>
<div>
<img src=”img_forest.jpg” alt=”Forest” style=”width:100%”>
</div>
<div>
<img src=”img_mountains.jpg” alt=”Mountains” style=”width:100%”>
</div>
</div>
</body>
</html>
How to create side-by-side images with the CSS flex property:
Flexbox Example
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
* {
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
</style>
</head>
<body>
<h2>Images Side by Side</h2>
<p>How to create side-by-side images with CSS Flexbox:</p>
<div>
<div>
<img src=”img_snow.jpg” alt=”Snow” style=”width:100%”>
</div>
<div>
<img src=”img_forest.jpg” alt=”Forest” style=”width:100%”>
</div>
<div>
<img src=”img_mountains.jpg” alt=”Mountains” style=”width:100%”>
</div>
</div>
</body>
</html>
Add Responsiveness
Optionally, you could add media queries to make the images stack on top of each other instead of floating next to each other, on a specific screen width.
The following example will stack the images vertically on screens that are 500px wide or less:
Responsive Example
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: “”;
clear: both;
display: table;
}
/* Responsive layout – makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Responsive “Side-by-Side” Images</h2>
<p>How to create side-by-side images with the CSS float property. On screens that are 500px wide or less, the images will stack on top of each other instead of next to each other:</p>
<p>Resize the browser window to see the effect.</p>
<div>
<div>
<img src=”img_snow.jpg” alt=”Snow” style=”width:100%”>
</div>
<div>
<img src=”img_forest.jpg” alt=”Forest” style=”width:100%”>
</div>
<div>
<img src=”img_mountains.jpg” alt=”Mountains” style=”width:100%”>
</div>
</div>
</body>
</html>