Html div in same row | Html div in same line

    In this post I am explaining few method which can used to put div in same line, see the demo also at the end using Jsfiddle.

Method1 : Using table-cell

.row
{
    display: table;
    width: 100%; /*Optional*/
    border-spacing: 5px; /*Optional*/
}
.col
{
    display: table-cell;
    text-align:center;/*Optional*/
    line-height:100px;/*Optional*/
    height:100px;/*Optional*/
    background-color: green; /*Optional*/
}

<div class="row">
    <div class="col">Div</div>
    <div class="col">Div</div>
    <div class="col">Div</div>
    <div class="col">Div</div>
</div>
<div class="row">
    <div class="col">Div</div>
    <div class="col">Div</div>
    <div class="col">Div</div>
    <div class="col">Div</div>
</div>
<div class="row">
    <div class="col">Div</div>
    <div class="col">Div</div>
    <div class="col">Div</div>
    <div class="col">Div</div>
</div>

Demo

Method2 : Using inline-block

.row{
  text-align:center;
}

.col {
  display: inline-block;
  text-align: center;/*Optional*/
  line-height: 100px;/*Optional*/
  width:100px;/*Optional*/
  height: 100px;/*Optional*/
  margin:5px;/*Optional*/
  background-color: green; /*Optional*/
}

<div calss="row">
    <div class="col" >Div</div>
    <div class="col" >Div</div>
    <div class="col" >Div</div>
    <div class="col" >Div</div>
</div>  
<div calss="row">
    <div class="col" >Div</div>
    <div class="col" >Div</div>
    <div class="col" >Div</div>
    <div class="col" >Div</div>
</div> 

Demo

Method3 : Using float-left

.col {
  float:left;
  width:100px; 
  text-align:center;/*Optional*/
  line-height:100px;/*Optional*/
  height:100px;/*Optional*/
  background-color: green; /*Optional*/
  margin:5px;
}

<div>
    <div class="col">Div</div>
    <div class="col">Div</div>
    <div class="col">Div</div>
    <div class="col">Div</div>
    <div class="col">Div</div>
    <div class="col">Div</div>
    <div class="col">Div</div>
    <div class="col">Div</div>
</div>  

Demo