CSS HTML

How to place one div beside the other (CSS)

October 27, 2021

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?

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!

Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x