How to place div side by side with CSS?

Spread the love

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.

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.

To place div side by side with CSS, we use flexbox.