3 ways to display two divs side by side

The most common and traditional way (inline-block)

The most common way to place two divs side by side is by using inline-block css property.

HTML:

<div class='parent'>
  <div class='child'>child 1</div>
  <div class='child'>child 2</div>
</div>

CSS:

.parent {
  border: 1px solid black;
  margin: 1rem;
  padding: 2rem 2rem;
  text-align: center;
}
.child {
  display: inline-block;
  border: 1px solid red;
  padding: 1rem 1rem;
  vertical-align: middle;
}

The output of the above styling is:

The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.

In child we used verticle-align:middle to vertically align the divs taking their center into consideration.

Also we can make space between the two divs by adding margin-right to the first div and/or margin-left to the second div.

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

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:

CSS:

.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:

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

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:

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

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!

Grid Method

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:

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

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.