Use CSS to put div side by side

Came across a situation where you want to put the div side by side? No worries, I will teach you five ways to align div side by side using CSS.

Those five ways are,

Float
Flexbox
Grid
Inline-block
Inline grid/flex, etc.

Let’s learn all of those five methods practically,

Before we get started

I will use codedamn playground to demonstrate the examples because I don’t have to create the files and folders inside my local Operating system. But feel free to choose either way.

If you want to use the playground, follow these steps:

Step 1: Visit the codedamn official website. Create an account there.

Step 2: I have already set up the necessary files inside the playground for you. At the top right, you will see the fork button. Click on the fork button and Fork the playground. Follow along with me.

Link to playground

Step 3: Once you open the playground, you will see the CSS folder on the left side. I have created separate files for different methods.

Inside the index.html file, I have linked float.css it as the default CSS file.

Float

The float property of CSS will define how the element should float.

Create two divs inside the index.html file. Give class names first for the first div and second for the second div.

<div class="first"></div>
<div class="second"></div>
Code language: HTML, XML (xml)

Now open the float.css file. Inside this file, we give both the divs some height and width of 100px and give them random colors to differentiate.

// Reset the padding and margin
*{
    margin: 0;
    padding: 0;
}

.first{
    width:100px;
    height: 100px;
    background-color: #c4c4;
}

.second {
    width: 100px;
    height: 100px;
    background-color: blueviolet;
}
Code language: CSS (css)

You can see that our divs are sitting from top to bottom.

But we want to align them side by side,

For the first div, add float left because we want to keep it on the left side, and for the second div, add the float right property, which will make the div float on the right side.

The code should look like this.

*{
    margin: 0;
    padding: 0;
}
.first{
    width:50vw;
    height: 100px;
    background-color: #c4c4;
    float: left;
    
}

.second {
    width: 50vw;
    height: 100px;
    background-color: blueviolet;
    float: right;
 
}
Code language: CSS (css)

That’s it. Using float, you can align divs side by side, but what if we have three divs? or multiple divs? You add the float right property for the last element, and for the first to last but one element, add the float left CSS property.

Flexbox

Aligning divs side by side using flexbox is one of the easiest parts. You need to write only one line of code inside CSS.

Close the float.css file, and open the flexbox.css file. We need to make little changes inside the index.html file, delete the div elements, and link to the CSS file from float.css to flexbox.css

Create a div element with the class name parent. Add two to three div elements inside the parent div with the class names child1 and child2, or Child3 as many as you have created.

Code inside the index.html file should look like this,

<!doctype HTML>
<html>
    <head>
        <title>codedamn HTML Playground</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--- Link to flexbox.css---->
        <link rel="stylesheet" href="css/flexbox.css" />
    </head>
    <body>   
        <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
        </div>
        <script src="https://bit.ly/codedamn-web-console"></script>
        <script src="/script.js"></script>
    </body>
</html>
Code language: HTML, XML (xml)

Inside the flexbox.css file, we need to make the parent height and width larger so child elements can breathe,

Then on the parent div, add the `display: flex`. Parent div will align the children’s elements side by side.

The default direction for the flex is row, so if you ever want to align divs top to bottom, add `flex-direction: column` after adding `display: flex`.

The direction will change from row to column.

Code inside the flexbox.css file should look like this,

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.parent {
    width: 100vw;
    height: 100vh;
    /* Aligns the children items in a row direction */
    display: flex;
}

.child1{
    width: 100px;
    height: 100px;
    background-color: violet;
}

.child2{
    width: 100px;
    height: 100px;
    background-color: blue;
}
Code language: CSS (css)

Grid

Grid is best if you want to work with columns. Using the grid, we can create a complex layout.

I’m not making any changes inside the `index.html` file.

Open the `grid.css` file. Inside the grid.css file, On the parent container, we will call the `display: grid` property and `grid-template-columns: 1fr 1fr`

1fr means one fraction. If you want to create three columns, write 1fr three times.

grid.css file should look like this,

.parent{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.child1{
    width: 100px;
    height: 100px;
    background-color: blanchedalmond;
}

.child2{
    width: 100px;
    height: 100px;
    background-color: brown;
}
Code language: CSS (css)

Inline-block

If we want to align divs side by side using inline-block, we need to call the `inline-block` property on the child elements,

What is the difference between inline, block, and inline-block?

Inline elements do not affect height and width, just like span tags.

Block element will take the whole width of the container.

Inline-block element formatted as an inline element, but it will have height and width effect.

Change the CSS file path to the inline-block.css file.

Make sure we have a parent container; inside that container, create two to three child divs.

Inside the inline-block.css file, the parent container will call text-align: center to center the child element, and we will `display: inline-block` property on the child elements.

The inline-block.css the file should look like this.

.parent{
     text-align: center;;
 }


.child1{
    width: 100px;
    height: 100px;
    background-color: rgb(24, 82, 82);
    display: inline-block; 
}
.child2{
    width: 100px;
    height: 100px;
    background-color: rgb(27, 102, 18);
    display: inline-block; 
}
 
Code language: CSS (css)

Inline-flex & Inline-Grid

Using Inline-flex:

Aligning the divs side by using inline-flex is one of the easiest methods. You can need to call inline-flex on the parent container. That’s it.

Inside the index.html file, change the CSS file path to inline-grid-flexbox.css

Inside the CSS file, on the parent container, write display: inline-flex. That’s it, and all the child elements align side by side.

The code for aligning div side by side using inline-flex

.parent{
    display: inline-flex;

}

.child1{
    width: 100px;
    height: 100px;
    background-color: tomato;
}

.child2{
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
}
Code language: CSS (css)

Using Inline-grid:

The inline-grid property will display the parent container as the inline-grid level container, so it works exactly as a grid container.

On the parent container, call the display: inline-grid property, which will align the items in a column.

Now use grid-template-columns: 1fr 1fr to create two columns. As I have said above, you can write 1fr as many columns as you want.

code for inline-grid,

.parent{
    display: inline-grid;
    grid-template-columns: 1fr 1fr;

}

.child1{
    width: 100px;
    height: 100px;
    background-color: tomato;
}

.child2{
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
}
Code language: CSS (css)

Summary

I think you can easily align the divs side by side using those five CSS properties. If you want to learn CSS for free, check out the course by codedamn.

Thanks for reading

Use CSS to put div side by side – 5 ways to do that