Example
The div is a block-level element, i.e it occupies the whole of the page width and the siblings are place one below the other irrespective of their width.
<div>
<p>This is DIV 1</p>
</div>
<div>
<p>This is DIV 2</p>
</div>
The output of the following code will be
We can make them in-line by adding a float css property to the div.
HTML:
<div class="outer-div">
<div class="inner-div1">
<p>This is DIV 1</p>
</div>
<div class="inner-div2">
<p>This is DIV 2</p>
</div>
</div>
CSS
.inner-div1 {
width: 50%;
margin-right:0px;
float:left;
background : #337ab7;
padding:50px 0px;
}
.inner-div2 {
width: 50%;
margin-right:0px;
float:left;
background : #dd2c00;
padding:50px 0px;
}
p {
text-align:center;
}
