html

3 Easy Ways to Place Two Divs Side by Side in CSS

Divs are mainly used to create different sections in HTML, which can be styled accordingly with the help of the CSS. Sometimes you may need to place two divs side by side to create a stylish layout. For this purpose, CSS provides various methods such as:

In this article, we will discuss each of the mentioned approaches one by one and provide a suitable example of each method.

So, let’s get started!

Method 1: Place Two Divs Side by Side in CSS Using grid

The CSS “grid” layout allows the user to place two or more two divs side by side. Basically, the grid is a value of the display property used to create a layout consisting of rows and columns.

Syntax

Syntax of the display property with grid layout is given below:

display: grid

Now, let’s check out an example related to placing two divs side by side in CSS using the grid layout.

Example

Here, we will create two child divs inside the parent div, having the class names as “parent”, “child” and “child”:

<div class="parent">

<div class="child"></div>

<div class="child"></div>

</div>

Next in the CSS section, use “.parent” to access the parent div and set the value of the display property as “grid”. Next, set the fraction using the “grid-template-columns” property to create space for columns. In our case, we will set fractions as “1fr” and “1fr”, which means both divs have acquired equal space. Furthermore, we will set the gap between two columns using the column-gap property and set its value as “25px”.

CSS:

.parent{

display: grid;

grid-template-columns: 1fr 1fr;

column-gap: 25px;

}

In the next step, we use “.child” to access both child div and set the height of divs as “250px” and set the background color as “rgb(253, 5, 109)”:

.child{

height: 250px;

background: rgb(253, 5, 109);

}

This will show the following outcome:

Let’s move to another method to place div side by side

Method 2: Place Two Divs Side by Side in CSS Using flex

The “flex” is the value of the display property that allows placing two divs side by side. This property is used to set a flexible length for the flexible item. It shrinks or grows the flex item to fit in its container.

Syntax

The syntax of display property with flex is given below:

display: flex;

Let’s move to the example to understand the stated concept.

Example

We will consider the same HTML file and apply “flex” to the parent container. Here, we will set the value of the display property as flex and set the gap between the child divs as “10px”:

.parent{

display: flex;

gap: 10px;

}

After that, set the width, height and background color of the div as “650px”, “200px”, and “rgb(0, 255, 42)”, respectively:

.child{

width: 650px;

height: 200px;

background: rgb(0, 255, 42);

}

The outcome of the given code is given below:

Method 3: Place Two Divs Side by Side in CSS Using float

The CSS float property specifies the floating direction of an element. More specifically, this property can be utilized for placing two divs side by side in CSS.

Syntax

The syntax of the float property is:

float: none|left|right

Here is the description for the above-given values:

  • none: It is used to restrict floating.
  • left: It is used to float elements on the left side.
  • right: It is used to float elements on the right side.

Let’s move to the example of placing div side by side.

Example

Now, we will create two divs inside the <body> tag and assign class name as “div1” and “div2”:

<body>

<div class="div1"></div>

<div class="div2"></div>

</body>

Then, use “.div1” and “.div2” to access the containers added in the HTML section. We will use both divs in the same class because the properties and values that we are going to assign to both are the same.

Next, we assign the value of the float property as “left” and set the width and height of the div as “50%” and “40%”. We also use the box-sizing property and set its value as “border-box”. Furthermore, set the background color of the div as “rgb(7, 255, 222)” and set the values of border property as “3px”, “solid”, and “rgb(255, 0, 255)”:

.div1, .div2{

float: left;

width: 50%;

height: 40%;

box-sizing: border-box;

background: rgb(7, 255, 222);

border: 3px solid rgb(255, 0, 255);

}

Note: You can place two divs side by side without using box-sizing property and border property by setting the different background colors of the divs.

Once you implement the above code, executes the HTML file and see the result:

Note: To create a gap between two divs, first create another div and then set the margin of the div accordingly.

Conclusion

Divs can be placed side by side by using three different methods of CSS, which are the “flex” and “grid” values of the display property and the “float” property. Each of the methods works efficiently; however, you can utilize any of them according to our requirements. In this guide, we have discussed three methods to place div side by side Using CSS and provided related examples.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.