How to place one div beside the other (CSS)
In this article we will learn how to place one div beside the other, only using CSS in a simple and fast way, as it is done in professional projects.

Hey you programmer, okay? Let’s learn a bit more!
The solution to this problem is quite simple, we just need to change the CSS display rule
Because when a <div> is created, it comes out with the rule set to block
And it does exactly what the name says, turns a <div> into a block and we need to change the display to inline-block
That way we’ll be able to achieve our goal on how to place one <div> next to another
How to place one div beside the other: practice
So here we go, first our HTML structure:
<!DOCTYPE html> <html> <head> <title>Como posicionar uma div do lado de outra</title> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> </html>
And now the CSS we’re going to start with in this project:
div { width: 100px; height: 100px; } #div1 { background-color: magenta; } #div2 { background-color: teal; }
The expected result in the web browser is this:
Well that’s the problem, the <div> is positioned vertically and we want it to be positioned horizontally
To solve this, we just need to add the display property with the inline-block value in the <div> rule.
See how it looks:
div { width: 100px; height: 100px; display: inline-block; }
And this will be the final result, with the problem solved:
As you can seeĀ the solution is very simple, you only need to know the display property
We can also do it in a reverse way
For example: leaving a span on top of another, as the span tag comes with the inline display, we just need to change it to display block! Very easy, right?
Conclusion
In this article we learned that leaving one div next to the other is a very simple technique that only requires a little knowledge of CSS.
We just need to change the div’s display to inline-block as it defaults to block
And that’s it for today, see you on the next post!
Want to learn more web development techniques? Click here!