Sometimes, we want to place div side by side with CSS.
In this article, we’ll look at how to place div side by side with CSS.
How to place div side by side with CSS?
To place div side by side with CSS, we use flexbox.
For instance, we write
<div class="container">
<div class="fixed"></div>
<div class="flex-item"></div>
</div>
to add nested divs.
Then we write
.container {
display: flex;
}
.fixed {
width: 200px;
}
.flex-item {
flex-grow: 1;
}
to make the outer div a flex container with display: flex;
.
And then the inner divs will be displayed side by side.
Conclusion
To place div side by side with CSS, we use flexbox.