javascript - Jquery to make recursive divs- possible? -

not sure how i'm trying make divs behave columns stretch across screen evenly (this done/easy) , make sub columns. here's have: js:

$(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);     }); }); 

css:

#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; } 

html:

<div id="container">     <div class="column">     text : text : text : text :this text : text :this text : text :this text : text :this text : text :this text : text :this text : text :this text : text      </div>     <div class="column">     text : text : text : text :this text : text :this text : text :this text : text :this text : text :this text : text :this text : text :this text : text      </div>     <div class="clear">clear</div> </div><!-- end container --> 

this works fine until try inserting inner column:

<div id="container">     <div class="column">     text : text : text : text :this text : text :this text : text :this text : text :this text : text :this text : text :this text : text :this text : text          <div class="column">             inner column         </div>         <div class="column">             inner column         </div>     </div>     <div class="column">     text : text : text : text :this text : text :this text : text :this text : text :this text : text :this text : text :this text : text :this text : text      </div>     <div class="clear">clear</div> </div><!-- end container --> 

any ideas?

you can arrange column width level outer inner columns:

define function takes outermost parent element containing $('.column') elements , arrage it's direct children, apply same function each $('.column') children (as parent now, arrange children) recursively...

$(function(){     function arrange(colsparent){          cols = colsparent.children('.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);         });           cols.each(function(){             arrange($(this));         });     }      level1colsparent = $('.column').first().parent();      arrange(level1colsparent); });