Div side by side in one line

Find answer how to place two div elements side by side in the same line. When two div elements are placed one after another on HTML page they are displayed in two lines. They usually end up one above the other, never side by side.

Here you can find:

• how to place two div elements side by side using inline-block


• example of three div elements side by side using inline-block


• how to place two div side by side using table

Two div elements side by side using inline-block

This is the first div with text.

This is second div with text

Here is a code:

<div style="width: 100px; height: 100px; 
border: solid 1px #ccc; display: inline-block;">
 <p>This is the first div element.</p>
 </div>

<div style="width: 100px; height: 100px; 
border: solid 1px #ccc; display: inline-block;">
<p>This is second div element.</p>
</div>

To make two div elements in same line display:inline-block is used. An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.

Sometime you want to center a div element, use margin-right:auto and margin-left:auto inside style attribute.

Three div elements side by side using inline-block

This is the first div

This is second div

This is the third div

Code:

<style>
.oneline {
 width: 100px;
 height: 100px;
 border: solid 1px #ccc;
 display: inline-block;
}
</style>

<div class="oneline">
<p>This is the first div</p>
</div>

<div class="oneline">
<p>This is second div</p>
</div>

<div class="oneline">
<p>This is third div</p>
</div>

• in lines 1 - 9 style for class oneline is defined. "display:inline-block" is used like in previous example.
• all three divs have class "oneline" so they are in one line.

Two div elements in one line using float left

This is the first div

This is second div

This is third div

This is in new line

Code:

<style> 
    .floatoneline 
    {  width: 100px;  
       height: 100px;  
       border: solid 1px #ccc; 
       float: left;  
    } 
    .pageHolder
    { 
    overflow: auto; 
    width: 100%; 
    } 

</style>   
    <div class="pageHolder">
    <div class="floatoneline"> <p>This is the first div</p> </div>  
    <div class="floatoneline"> <p>This is second div</p> </div>  
    <div class="floatoneline"> <p>This is third div</p> </div>
    </div>
    <span>This is in new line</span>

Using float:left is best way to place multiple div elements in one line. Why? Because inline-block does have some problem when is viewed in IE 9.

Class pageHolder is used to clear floats. It is like <br /> but for folats.

Two div elements side by side in one line using table

First div

Second div

Code:

<table border="1">
<td>
    <div>First div</div>
</td>
<td>
    <div>Second div</div>
</td>
</table>

Above is a simple example how to place two divs together in one line using table. Just make a table and in one row place two columns with divs inside.