Footer size tests

by Marventus

HTML

<div id="footer">
    <div class="column" id= "column1">
        <div class="box small"></div>
        <div class="box small"></div>
    </div>
    <div class="column" id="column2">
        <div class="box big"></div>  
    </div>
    <div class="column" id="column3">
        <div class="box big"></div>     
    </div>
</div>

CSS

#footer{
    background:#bbb;
    width:100%;
}
#footer .box{
    background-clip:content-box;
    margin-bottom:20px;
}
#footer .column{
    display:block;
    float:left;
    width:32%;
}
#column1, #column2{
    padding-right:2%;
}
#column1 .box{
    background:#99f;
}
#column2 .box{
    background:#9f9;
}
#column3 .box{
    background:#f99;
}
#footer .small{
    height:50px;
}
#footer .big{
    height:100px;
}
#footer .tall{
    height:200px;
}
.nospace{
    margin-bottom:0!important;
}

JavaScript

// Footer padding
jQuery("#footer .column .box").addClass('nospace');
/* Footer Height
var maxFooterHeight = 0;
jQuery("#footer").children(".column").each(function() {
    maxFooterHeight = maxFooterHeight > jQuery(this).outerHeight(true) ? maxFooterHeight : jQuery(this).outerHeight(true);
});
jQuery("#footer").height( maxFooterHeight);
*/