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:

Read More: How to make 2 div in one row?