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.

How to place one div beside the other cover

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:

How to place one div beside the other example

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?