Jquery to make recursive divs- possible?

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:

$(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">
    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 
    </div>
    <div class="column">
    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 
    </div>
    <div class="clear">clear</div>
</div><!-- end container -->

This works fine until you try a inserting an inner column:

<div id="container">
    <div class="column">
    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 
        <div class="column">
            inner column
        </div>
        <div class="column">
            inner column
        </div>
    </div>
    <div class="column">
    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 
    </div>
    <div class="clear">clear</div>
</div><!-- end container -->

Any ideas?

You can arrange column width by level from outer to inner columns:

Define a function that takes the outermost parent element containing $('.column') elements and arrage it's direct children, then apply the same function to each $('.column') children (as a parent now, to arrange its 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);
});

My suggestion would be to use display:table-row, display:table-cell to make things a lot more easier. It will automatically arrange your columns and subcolumns in equal width tabular form.

It looks to me like you will have a problem because of the fact that with

cols = $('.column');

you will always get ALL the divs (and any other elements) with that class of the entire document, but what you really want to get is only the children divs/elements of a particular element.

You might try adding a parameter that is the parent element for the columns you will resize per function call.

To get the columns of a particular parent element, you could use the children function.

So pretending that you pass in the parent element, of which you plan to resize all the divs that are children of this parent, you could use this line:

cols = $(parent_element).children('.column');

Also, to make the function recursive you will have to call itself from within the cols.each. Pass in the children so that they will be used as the parent in the next level of calls. I will assume that you can give the function the name of resize_columns_recursive.

Finally the end result would look something like:

function resize_columns_recursive(parent_element){

  var cols = parent_element.children('.column');
  var col_fluff = parseInt(cols.css('padding-left'))+parseInt(cols.css('padding-right'))+parseInt(cols.css('margin-left'))+parseInt(cols.css('margin-right'));
  var col_width = (Math.floor(parent_element.width()/cols.size()-col_fluff));

  cols.each(function(){
    $(this).width(col_width);
    resize_columns_recursive(this);
  });    

}

EDIT: I made the local vars local with the var declaration. This seems to be working on jsfiddle (see comments).