Align 2 DIV tags in same line in HTML

Sometimes, we will have requirements to display 2 Div tags in same line in HTML.

By default, if we have multiple div tags it will be displayed one below the other. In othere words, each div will be displayed in a separate line. To display multiple div tags in the same line, we can use the float property in CSS styles. The float property takes left, right,none(default value) and inherit as values.

The value left indicates the div tag will be made to float on the left and right to float the div tag to the right. The inherit value makes the div tag to inherit the parent element's value.

Hence, in order to display 2 div tag in same line, we need to float the first div to left and second to the right using css float property.

The following code snippet will help us achieving it.
 
 
  
<div>
           <div style="width:80%;Text-align:center;float:left;">
           <b>First Div</b></div>
           <div style="Text-align:right;Width:20%;float:right">
           <b>Second Div</b></div>
</div>
 
  
In the above markup, we set the first div tag float property to left and the second div tag's float property to right which makes them to display in a single line.

Tip:
It's always better to seggregate the css styles to a separate css class in a separate file instead of styling it inline like above.

Something like below,

.leftdv

{

width:80%;

Text-align:center;

float:left;

}

<div class="leftdv">
<b>First Div</b></div>