javascript - Is there a way to position n number of divs inside a div container -

is there way position n number of divs inside div container, each div cell won't collide each other using css , js. need set left value without changing height , top values. fine change cell width.

please check code sample.

.container  	{  	  width : 400px;  	  height : 1000px;  	  background : #000;  	  position : relative;  	}    	.cell  	{  	  position  :absolute;  	  background : yellow;  	  border: 2px solid red;  	}

<div class="container">     <div class="cell" style="top:50px;width:100%;height:100px"></div>       <div class="cell" style="top:150px;width:50%;height:50px"></div>     <div class="cell" style="top:150px;width:50%;height:50px;"></div>     <div class="cell" style="top:230px;width:33.33%;height:50px;"></div>     <div class="cell" style="top:230px;width:33.33%;height:50px;"></div>     <div class="cell" style="top:230px;width:33.33%;height:50px;"></div>  </div>

expected output:

if cells should stacked 1 above other in order of mention, make display property 'block'

.container {    width: 400px;    height: 1000px;    background: #000;    position: relative;  }    .cell {    display: block;    background: yellow;    border: 2px solid red;  }

<div class="container">    <div class="cell" style="width:100%;height:100px;"></div>    <div class="cell" style="width:50%;height:50px;"></div>    <div class="cell" style="width:50%;height:50px;"></div>    <div class="cell" style="width:33.33%;height:50px;"></div>    <div class="cell" style="width:33.33%;height:50px;"></div>    <div class="cell" style="width:33.33%;height:50px;"></div>  </div>