Question

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?

Answer 1

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