DEV Community

Mainak Das
Mainak Das

Posted on • Edited on

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>


Enter fullscreen mode Exit fullscreen mode

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;
}


Enter fullscreen mode Exit fullscreen mode

The output of the above styling is:
Two divs using inline-block

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>


Enter fullscreen mode Exit fullscreen mode

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; 
}


Enter fullscreen mode Exit fullscreen mode

The resulting code will look like this:

Two divs using float method
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>


Enter fullscreen mode Exit fullscreen mode

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;
}


Enter fullscreen mode Exit fullscreen mode

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:

Two divs using flexbox

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>


Enter fullscreen mode Exit fullscreen mode

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; 
}


Enter fullscreen mode Exit fullscreen mode

And here’s what the code will look like:

Two divs using grid

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.

Top comments (7)

Collapse
 
akash1394 profile image
akash1394

u can actually use display inline-block method, have both the elements as inline-block and vertical-align middle, put some space using margin or put gap:"some value" and voila it would do the trick

as its an interview question, "how to place to divs next to each other withour using flex"

Collapse
 
dawnind profile image
Mainak Das

Yeah that's very common and traditional way. I totally missed that out! 😅
Thank you 😄

Collapse
 
maame-codes profile image
Maame Afia Fordjour

This was really helpful! Helped me solve my issue, cheers. :)

Collapse
 
dhanush9952 profile image
Dhanush

Simple and very useful property.
..

Collapse
 
russoue profile image
Mohammad Husain

Hey your article is strikingly similar to another article published before yours - coder-coder.com/display-divs-side-....

Collapse
 
brvnbld profile image
brvnbld

I am using wordpress and I need to set the featured image and the title as side by side. Since I cannot edit the html code for that. Are there any other way than setting adding the code for parent?.

Collapse
 
brenocosta20 profile image
BrenoCosta20

What if I wanted to make each child a different color and size?