Question

I want to achieve a layout where the outer div is 100% width and height. In this div I will add more divs dynamically. I want to write a css structure that splits the outer div so that each div gets the same space. Actually I want to create a dynamic grid with div elements.
Examples below:

Answer 1

The answer of “Sowmia” is so good but one thing :
you want to sub div have AUTO SIZE and with is solution you can’t do this.
my solution is exactly the Sowmia’s answer with some changes:

<style type="text/css" >
.main{width:100%;  height:100%;  background:#F5D0A9; overflow:auto}
.sub{width:auto;  
    height:auto;
    float:left;
    background:#8181F7;
    margin:4px;  
   border:solid 1px #2ECCFA}
</style>

and html:

<div class="main">
<div class="sub"></div>
    <div class="sub">this is div number 1</div>
    <div class="sub">this is div number 2</div>
    <div class="sub">if you have a big text this div is bigger than the other
    <br />
    even you can have a text with some height
        </div>
</div>

and this is :
DEMO