Longing for a break

I am working on a recode for a government agency website at the moment, their existing site essentially uses tables (SHAME!) to handle layout.  One benefit of working with tables is of course the ease with which multi-column layouts can be achieved and no need for trickery that we resort to with CSS layouts.  So, in my efforts to recode their site for CSS layout I’ve had to come up with some workarounds.  Typically I would have used faux columns developed years ago, that generally work really well, but this time I decided I wanted to employ jQuery to assist.

I chose to use jQuery to assist me with many things, but most importantly setting the heights of two containing divs that are floated next to one another, with the first also containing two floated divs inside which when the layout becomes too narrow the second falls below the first.

Because their site has the news columns with one b/g colour, and features with a second b/g colour I at first tried using teh jQuery equalHeights plug-in.  This worked okay, but added annoying scrollbars.  So I used their code as the basis for just doing it manually.

function adjustHeights() {
hNews = $(‘#news’).height(); // Get height
hFeatures = $(‘#features’).height(); // Get height
mHeight = hNews > hFeatures ? hNews : hForestry;  // Set mHeight to the larger of the two heights
$(‘#news, #features’).height(mHeight);  // Set both to equal heights
}

This worked okay.  The problem I was now faced with, and a likely one, is that if someone resized their browser the columns didn’t adjust.  So to capture the resize event and readjust sizes I used the following code:

$(window).resize(function() {
$(‘#news, #features’).css(“height”,”auto”);  // Eliminate the heights value
adjustHeights();  // Set the heights once more
});

So far I’ve tested this in IE6, FF3.06 and Safari 3.21 and it’s working across each.  Safari seems to do a better job too, as I’m dragging the browsers width it’s applying the fixes.

Hope this helps anyone else attempting the same!