How to get two divs side-by-side with CSS?

Spread the love

Sometimes, we want to get two divs side-by-side with CSS.

In tis article, we’ll look at how to get two divs side-by-side with CSS.

How to get two divs side-by-side with CSS?

To get two divs side-by-side with CSS, we use flexbox.

For instance, we write

<div id="parent_div_1">
  <div class="child_div_1"></div>
  <div class="child_div_2"></div>
</div>

<div id="parent_div_2">
  <div class="child_div_1"></div>
  <div class="child_div_2"></div>
</div>

<div id="parent_div_3">
  <div class="child_div_1"></div>
  <div class="child_div_2"></div>
</div>

to add nested divs.

Then we write

#parent_div_1,
#parent_div_2,
#parent_div_3 {
  display: flex;
}

to make the 3 outer divs flex containers with display: flex;.

Now the child divs will show side by side.

Conclusion

To get two divs side-by-side with CSS, we use flexbox.

Leave a Reply

Your email address will not be published. Required fields are marked *