Two divs side by side flexbox – 3 ways to display two divs side by side (float, flexbox, CSS grid)

by

Two divs side by side flexbox: There are several ways to place HTML divs side-by-side. The simplest and most efficient way to do this is to make use of a handful of CSS properties (i.e., float, grid, and flex).

Float Method

Float two divs side by side: In the float method, we will be using the following HTML markup:

HTML:

<div class="float-parent-element">
      <div class="float-child-element">
        <div class="red">Float Column 1</div>
      </div>

      <div class="float-child-element">
        <div class="yellow">Float Column 2</div>
      </div>
    </div>

The .float-parent-element is simply the parent element that contains both .float-child-element elements.

To get the divs side by side, we will use the following CSS rules:

.float-parent-element {
  width: 50%;
}
.float-child-element {
  float: left;
  width: 50%;
}
.red {
  background-color: red;
  margin-left: 50%;
  height: 100px;
}
.yellow {
  margin-left: 50%;
  height: 100px;
  background-color: yellow;
}

The resulting code will look like this:

using float

I’ve added an initial width of 50% to the .float-parent-element so that it will get some width at first.

Then I have added each of the .float-child-element a property of float left to position then side by side and a width of 50% of the parent div.

Finally, for the .float-child-element I have added their respective colors with some height of 100px and margin to better differentiate them.

Flexbox Method

Float divs side by side: With flexbox, we can use a more intuitive way of aligning our two div elements.

HTML:

<div class="flex-parent-element">
      <div class="flex-child-element magenta">Flex Column 1</div>

      <div class="flex-child-element green">Flex Column 2</div>
    </div>

CSS:

.flex-parent-element {
  display: flex;
  width: 50%;
}

.flex-child-element {
  flex: 1;
  border: 2px solid blueviolet;
  margin: 10px;
}

.flex-child-element:first-child {
  margin-right: 20px;
}

With flexbox, we have set display: flex on the parent .flex-parent-element. This turns on flexbox.

Then in each .flex-child-element, we are setting flex: 1. This number is like a ratio comparing the widths of each child in the parent flex element.

Since they are the same, the available space will be divided up equally. And since we have two child elements, they will each take up 50%.

Here’s what the resulting code will look like:

flex css

Space between divs by using a margin, and it will still fit

How to make two divs side by side: Notice that we’ve added space by adding margin: 10px to .flex-child-element. However, flexbox is intelligent enough to take that extra 20px into consideration when dividing up the rest of the available width.

This means you can add space with margin without having to calculate the exact pixels. Flexbox will fit the content for you!

CSS Grid Method

2 div side by side: And here’s how you can place the two divs side by side, using CSS grid:

HTML:

<div class="grid-container-element">
      <div class="grid-child-element purple">Grid Column 1</div>

      <div class="grid-child-element green">Grid Column 2</div>
    </div>

CSS:

.grid-container-element {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  border: 1px solid black;
  width: 50%;
}
.grid-child-element {
  margin: 10px;
  border: 1px solid red;
}

And here’s what the code will look like:

grid css

One big change with the grid is that you first determine what the grid template will look like. Meaning how many columns and/or rows you want in your layout.

In our case, we want two columns of equal width. So in the parent .grid-container-element, we turn the grid on with display: grid. Then we add in how many columns we want in our layout with the grid-template-columns property.

We want two columns of equal width, so we set it to 1fr 1fr. This tells the browser to create a two-column layout, and each column takes up 1fr (fr = fractional unit) of space.

The fr unit is a ratio of each column to another, similar to the flex: 1 rule we used in the flexbox method. Having the columns set to 1fr 1fr means that each column will take up the same amount of space.

Space between grid items with the grid-gap property

make 2 divs side by side: One big benefit to using a CSS grid is that you don’t need to use padding or margin to add space between grid items.

You can use the grid-gap (or gap in newer browsers) to automatically add space in your grid template.

We’ve set grid-gap to 20px, so the browser will know to add 20px of space between all items, whether they are side by side or stacked.