Question

I have a design that uses two outer columns, and within one of the outer columns in a heading section and two more columns below, like so:

**************************
*          header        *
**************************
|                |       |
|                |       |
|      out1      | out2  |
|                |       |
|                |       |
|                |       |
**************************
*          footer        *
**************************


**************************
*          header        *
**************************
|     title      |       |
|________________|       |
|          |     |       |
|          |     |       |
|    in1   | in2 |       |
|          |     |       |
|          |     |       |
|          |     |       |
**************************
*          footer        *
**************************

Now, some of the columns have borders, so out2 has a left hand side border and in1 has a right hand side border. The entire page has a faint large background tiling image.

I’m trying to make the columns the same height using jquery so the column borders look equal.

The way I’ve gone about it is to make the outer columns the same height, then try to make the inner columns both the same height, and as well, try to make them stretch all the way to the bottom of their in1 container (in the case where out2 is taller than out1)

Where it gets tricky is the title section inside out1 needs to be accounted for in the calculations.

out1 & out2 are contained inside a div with a layout class for easy selector query and in1, in2 & title are wrapped inside a div with the classes layout and nested (for easy selector and differentiation between nested and outer).

each layout container also has a div.clear to cancel out the effect of floating the columns on the height.

This is the code I run on the ready handler:

var layouts = $('.layout').get();

// sort to have .nested last
layouts.sort(function(a,b){
    return $(a).hasClass('nested');
});

$(layouts).each(function(){

        var $this = $(this);

        var container_height = $this.height();


        if ($this.hasClass('nested'))
        {
            var parent = $this.parent();
            var heading = $this.siblings('h1');
            var parent_h = parent.innerHeight();

            container_height = parent_h-heading.innerHeight() - 9; // (i'm not sure why I need -9 here, just go with it, it's not critical to the problem)
        }



        var columns = $this.find('> div').not('.clear');

        columns.each(function(){
            var padding = $(this).innerHeight() - $(this).height();
            $(this).height(container_height - padding);
        });

    });

It mainly works. On safari (mac * ipad), I find it helps to set a delay before running that code (even though it’s triggered within a ready event) but there are random inconsistencies where the column height is miscalculated too small, and causes the layout to flow over the footer.

I thought about using Faux Columns but the combination of borders and a background image on the document make it impossible because of the inner title section (the faux columns background should not display within that area, but I should still see through to the page background)

Do you have any clever idea that would make this simpler or could you provide some insight into why the occasional miscalculation happens?

Thanks

Answer 1

One appraoch may be to have the three columns wrapped in a containing element and disregard the outer columns. Your title would just sit above the three columns which you could specify a width to match the first two columns of the three.

Then you could apply a negative margin to the thrid column, making it line up with the page title. This will allow you to use a background image for the borders and not have to line things up with jquery.