interlates
New Member
I have a container div and a button with following markup and cssHTML:\[code\]<div class="container"> <table class="tbl"> <tr><td></td></tr> <tr><td></td></tr> </table></div><button id="btnAdd" type="button">Add</button>\[/code\]CSS:\[code\].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;}\[/code\]I am using jQuery to dynamically add child divs to the container div\[code\]$(function(){ $("#btnAdd").click(function(){ $(".container").append("<div class='innerdiv'>I am new</div>"); });});\[/code\]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 jsFiddleEdit The initial issue was solved by removing \[code\]position:absolute\[/code\] from \[code\].innerdiv\[/code\] once there are no elements in the \[code\]container\[/code\] div. I have a table inside my container div and suggested solutions add the child divs below the \[code\]table\[/code\] which I actually wanted to display over the `table' rows.