Question

I’m basically using a 3-column layout for a website. What I want to achieve is that the height of the middle (content) column is adjusted to the right column (sidebar), so the border to the right of the middle column reaches until the bottom of the page. Furthermore, I also want the left column to adjust it’s height to the other columns, and fill it with a background image unit the bottom of the page.

Website: http://www.massageforum.be

This is what I’ve been doing so far (panel_left = left column with background image, panel_right is a surrounding div for the div content (middle column) and sidebar (right column)):

function setDivHeight() {
    //set height of content according to sidebar if content is smaller than sidebar
    var DivHeightSidebar = document.getElementById('sidebar').offsetHeight;
    var DivHeightContent = document.getElementById('content').offsetHeight;

    if(DivHeightContent < DivHeightSidebar)
    {
        document.getElementById('content').style.height = DivHeightSidebar + 'px';
    }           

    //set height of panel_left according to panel_right so background image reaches until bottom of page
    var DivHeight = document.getElementById('panel_right').offsetHeight;
    document.getElementById('panel_left').style.height = DivHeight + 'px';
}

This function is called on every page just before the </body> tag.

The problem is that is works sometimes, but sometimes not. In some cases the height of the content column is adjusted to the height of the sidebar column, although it should be longer and content doesn’t fit anymore. Screenshot: http://www.massageforum.be/Massageforum1.png

Also, sometimes the height of the left column is not properly adjusted to the height of the panel_right.

I see this behaviour in Chrome, Firefox and Safari; didn’t test the other browsers.

Any advice on how to make this function work more robust?

Answer 1

It’s not a good idea to do that with JavaScript. Just restructure the page and do it all with HTML/CSS.