Question

I have a container div and a button with following markup and css

HTML:

<div class="container">
  <table class="tbl">
    <tr><td></td></tr>
    <tr><td></td></tr>
  </table>
</div>

<button id="btnAdd" type="button">Add</button>

CSS:

.container{
  position:releative;
  background-color:#d0d0d0;
  widht:90%;
  height:50px;
}
.innerdiv
{
  position:absolute;
  z-index:1;
  background-color: #D57657;    
}
.tbl{
    border-collapse: collapse;
    width:100%;
    height:100%;
}
.tbl td
{
    border-bottom:1px solid #000;
}

I am using jQuery to dynamically add child divs to the container div

$(function(){
  $("#btnAdd").click(function(){
      $(".container").append("<div class='innerdiv'>I am new</div>");
  });
});

The problem is all the divs that I create by clicking button hide each other and I want these child divs to be displayed side by side. How can I accomplish this.
You may want to have a look at it as jsFiddle

Edit The initial issue was solved by removing position:absolute from .innerdiv once there are no elements in the container div. I have a table inside my container div and suggested solutions add the child divs below the table which I actually wanted to display over the `table’ rows.

Answer 1

Don’t use position: absolute for your divs, juse float them to the left and they will be side by side, otherwise you need to calculate position (top, left)

float: left;