Jquery to make recursive divs- possible?
<p>Not sure how to do this but I'm trying to make divs behave like columns that stretch across the screen evenly (this is done/easy) and then make sub columns.  Here's what I have:
JS:</p>

<pre><code>$(function() {
    cols = $('.column');
    parent_width = cols.parent().width();
    col_fluff = parseInt(cols.css('padding-left'))+parseInt(cols.css('padding-right'))+parseInt(cols.css('margin-left'))+parseInt(cols.css('margin-right'));
    col_width = (Math.floor(parent_width/cols.size()-col_fluff));

    cols.each(function(){
        $(this).width(col_width);
    });
});
</code></pre>

<p>CSS:</p>

<pre><code>#container{
    position:relative;
    width:100%;
    height:100%;
    margin-top:50px;
}
.column{
    float:left;
    top:0px;
    left:0px;
    margin-right:20px;
    outline:#000 solid 2px;
    width:20%;
}
.clear{
    clear:both;
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div id="container"&gt;
    &lt;div class="column"&gt;
    This is some text : This is some text : This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text 
    &lt;/div&gt;
    &lt;div class="column"&gt;
    This is some text : This is some text : This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text 
    &lt;/div&gt;
    &lt;div class="clear"&gt;clear&lt;/div&gt;
&lt;/div&gt;&lt;!-- end container --&gt;
</code></pre>

<p>This works fine until you try a inserting an inner column:</p>

<pre><code>&lt;div id="container"&gt;
    &lt;div class="column"&gt;
    This is some text : This is some text : This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text 
        &lt;div class="column"&gt;
            inner column
        &lt;/div&gt;
        &lt;div class="column"&gt;
            inner column
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;
    This is some text : This is some text : This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text 
    &lt;/div&gt;
    &lt;div class="clear"&gt;clear&lt;/div&gt;
&lt;/div&gt;&lt;!-- end container --&gt;
</code></pre>

<p>Any ideas?</p>
