html - 適切な css と div レイアウト

Question

外側の div の幅と高さが 100% のレイアウトを実現したいと考えています。この div では、さらに div を動的に追加します。各 div が同じスペースを取得するように、外側の div を分割する css 構造を作成したいと考えています。実際には、div 要素を使用して動的グリッドを作成したいと考えています。以下の例:

Answer 1

「Sowmia」の答えはとても良いですが、1つのことです。
サブディビジョンに自動サイズを設定したいのですが、これを行うことができないソリューションです。
私の解決策は、いくつかの変更を加えたSowmiaの答えです。

<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>

および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>

そしてこれは：
デモ

Answer 2

cssだけでは不可能ですが、jqueryでこれを行うことができます.divをカウントし、divの数に応じて幅を設定するだけです