Sometimes, we want to put two divs next to each other with CSS.
In this article, we’ll look at how to put two divs next to each other with CSS.
How to put two divs next to each other with CSS?
To put two divs next to each other with CSS, we use flexbox.
For instance, we write
<div id="parent">
<div id="wide">Wide (rest of width)</div>
<div id="narrow">Narrow (200px)</div>
</div>
to add nested divs.
Then we write
#parent {
display: flex;
}
#narrow {
width: 200px;
background: lightblue;
}
#wide {
flex: 1;
background: lightgreen;
}
to make the outer div a flex container with display: flex;.
Then we make the 2nd div 200px wide.
And then we make the 1st div take the rest of the width of the container with flex: 1;.
Conclusion
To put two divs next to each other with CSS, we use flexbox.
