3 Easy ways to place two divs side by side in CSS

div1
div2

We often need to place two divs side by side when designing a webpage. In this tutorial, we will discuss 3 easy and efficient methods that we can use to place two div elements side by side.

These methods are as follows:

Let’s discuss each method in detail-


1. Place two divs side by side using CSS float

Using the float property to place two divs side by side is the easiest and most commonly used method. All you need to do is, place both the divs inside a parent div element and then apply float: left; property on both the divs.

Here is a working example:

Example:

div.child{
    float: left;
    width: 50%;
    height: 100px;
    box-sizing: border-box;
    background: yellow;
    text-align: center;
    border: 1px solid red;
}

With this method, you can not directly specify a gap between the two divs.

If you want to set a gap between the two divs, you have to add another div element inside the two divs and set a margin-right or margin-left to the innermost div elements.

Here is a working example:

Example:

div.child{
    float: left;
    width: 50%;
}
div.child > div{
    margin-right: 10px;
    height: 100px;
    box-sizing: border-box;
    background: yellow;
    text-align: center;
    border: 1px solid red;
}

2. Place two divs side by side using CSS Flexbox

CSS flexbox is also an efficient and easy method that can be used to place two divs side by side.

In this method, we have to first make the parent div element a flex container which we do with the help of the display property.

To make the parent div element a flex container apply display: flex; property on it. This will automatically place both the divs side by side.

Here is a working example:

Example:

div.parent{
    display: flex;
}
div.child{
    width: 50%;
    height: 100px;
    background: yellow;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid red;
}

The main advantage of using CSS flexbox over CSS float is that you can directly set a gap between the two divs which is directly not possible with CSS float.

To set a gap between the two divs use the column-gap property.

Here is a working example:

Example:

div.parent{
    display: flex;
    column-gap: 10px;
}
div.child{
    width: 50%;
    height: 100px;
    background: yellow;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid red;
}

3. Place two divs side by side using CSS grids

Just like CSS flexbox, you can use also use CSS grids to place two divs elements side by side. To achieve that you have to first make the parent div element a grid container. Which is done by applying display: grid; property on the parent div.

After that, you need to specify how many columns you want inside that grid container which in our case is 2. This you can set by the grid-template-columns property.

To define two columns of equal width use grid-template-columns: 1fr 1fr;.

Just like CSS flexbox, you can also specify the gap between the two columns using the column-gap property.

Here is a working example:

Example:

div.parent{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
}
div.child{
    height: 100px;
    background: yellow;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid red;
}

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts