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.
Top comments (7)
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"
Yeah that's very common and traditional way. I totally missed that out! 😅
Thank you 😄
This was really helpful! Helped me solve my issue, cheers. :)
Simple and very useful property.
..
Hey your article is strikingly similar to another article published before yours - coder-coder.com/display-divs-side-....
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?.
What if I wanted to make each child a different color and size?