HTML 2 DIV in one row – 3 easy ways to display

HTML 2 DIV in one row – A common problem that each and every developer faces at very beginning while learning HTML DIV. Here in this article we will explain 3 most smart ways to position multiple div’s in one row or side by side. So after reading this article you will be able to answer below questions definitely:

1. How to put two div in one row in HTML?
2. How do I make two divs on the same line in HTML?
3. Can I have 2 div in HTML?
4. How do I put two elements on one line in HTML?
5. How do I put 3 divs in a row?
6. How to align two divs horizontally in HTML?
7. How to set div in one row?
8. How do I align a div in a row?

To demonstrate every approach, First we will write a basic HTML code for the div elements and then apply different CSS styling to display those in one line.

HTML divs can be arranged in multiple ways to go side by side. To do this, the most widely used 3 CSS properties are display, float and flex. These are the easiest and most effective method the developers love a lot. So to achieve inline or side by side alignment we are now going to use all these 3 most basic CSS properties – Display, Float and Flex. Without wasting anytime let’s begin our coding:

Approach 1 – Position multiple div in single line:

The first and mostly used way is to place two divs in one line/row is by using inline-block value of Display css property. This display:inline-block property will set all div elements side by side. So let’s start the exercise now:

HTML:

<div class='master'>
  <div class='detail'>ONE</div>
  <div class='detail'>TWO</div>
  <div class='detail'>THREE</div>
</div>

CSS:

.master {
  border: 4px dashed green;
  margin: 1px;
  padding: 10px 10px;
  text-align: center;
}
.detail {
  display: inline-block;
  border: 4px dashed red;
  padding: 10px 20px;
  vertical-align: middle;
}

Output:

Here we have styled both DIV borders with dashed green and red. Creating spaces among Divs, using padding and margin. Aligning content by using vertical-align and text-align CSS properties. You can change all as per your need. So we are not going to discuss about styling not more as it’s right now is not in our scope.

So our first exercise has bee done successfully. As a result, now we are able to answer – how to make two elements side by side html or even multiple. It’s time to expand our HTML CSS code a bit more. Going to our 2nd approach.

Approach 2 – Html 2 div in one row example:

Using this method, we will show all of the div components inline by applying the float: left property to them. Additionally, users can display all div components in reverse order from the right side by using the float: right CSS option.

To get the HTML 2 DIV in one row or side by side DIV’s what ever the numbers 2 or more, we can use the following HTML CSS code:

HTML:

<div class='master'>
  <div class='detail'>ONE</div>
  <div class='detail'>TWO</div>
  <div class='detail'>THREE</div>
</div>

CSS:

div {
  float: left;
  color: green;
  border: 4px dashed green;
  margin: 10px 20px;
  text-align: center;
}

Output:

Approach 3 – Html 2 div in one row:

This method sets the display: flex and flex-direction: row to the parent div of all 3 div element. All of the components inside the parent div will be shown in a single row as a result of the flex-direction: row attribute.

Let’s see all HTML 2 div in one row example code mentioned below. It’s also need to clarify that how many number of divs are there for making inline, it’s not matter actually. If you can make Html 2 div in one row using css you can make more without any difficulties.

HTML:

<div class='master'>
  <div class='detail'>ONE</div>
  <div class='detail'>TWO</div>
  <div class='detail'>THREE</div>
</div>

CSS:

.master {
  display: flex;
  flex-direction: row;
  color: green;
  border: 4px dashed green;
  padding: 5px;
  width: 500px;
}
 
.master div {
  border: 2px solid red;
  margin: 10px 20px;
  width: 100px;
  text-align: center;
  font-size: 30px;
}

Output:

So here we have discussed all 3 most popular and effective methods on how to display HTML 2 DIV in one row and now you are all set to position or align multiple or two div in same line css within your HTML file correctly. Finally, if you like our post – please share, like and comment. It’s boost our motivation obviously to write more in future for you all. Thanks for being with us.