Multi Column Layout With Footer And Javascript

From CSS Discuss

Jump to: navigation, search

Multi-Column Layout With Footer, Footer positioned using Javascript

NB. a more generic javascript solution to clearing absolutely positioned elements can be found at http://www.shauninman.com/mentary/past/absolutely_positive.php

Let's assume you have a 3 column layout, and every column is a <div/> with a CSS style of position: absolute;. Like this:

<style type="text/css">
    #div_footer {  position: absolute; top: 1500px; width: 100%; height: 100px; }
    #div_column_left { position: absolute; top: 0px; left: 0px; width: 170px; }
    #div_column_center { position: absolute; top: 0px; left: 185px; width: 600px; }
    #div_column_right { position: absolute; top: 0px; left: 800px; width: 190px; }
</style>

<div id="div_column_left"><h1>Left column</h1></div>
<div id="div_column_center"><h1>Middle column</h1></div>
<div id="div_column_right"><h1>Right column</h1></div>
<div id="div_footer"><h1>Footer</h1></div>

Now since the <div> elements are positioned absolute, the footer is lying under the 3 columns, but we want it to sit where it belongs - at the end of the page, after/below the columns.

The following Javascript will try to determine the height of every <div> and then set the top offset of the footer accordingly.

<script language="Java Script" type="text/javascript">
    function positionFooter()
    {
        var heightContent = 0;

        // Get biggest column height by checking left, middle and right column
        if (document.getElementById('div_column_left'))
        {
            heightContent = document.getElementById('div_column_left').offsetHeight;
        }
        if (document.getElementById('div_column_center'))
        {
            heightContent = document.getElementById('div_column_center').offsetHeight > heightContent ? document.getElementById('div_column_center').offsetHeight : heightContent;
        }
        if (document.getElementById('div_column_right'))
        {
            heightContent = document.getElementById('div_column_right').offsetHeight > heightContent ? document.getElementById('div_column_right').offsetHeight : heightContent;
        }
        
        // Is there an element with the ID "div_footer"?
        if (document.getElementById('div_footer'))
        {
            // IE or not IE?
            if (navigator.userAgent && navigator.userAgent.indexOf("MSIE") >= 0)
            {
                document.getElementById('div_footer').style.setAttribute('top', heightContent + 'px');
            }
            else
            {
                document.getElementById('div_footer').style.setProperty('top', heightContent + 'px', null);
            }
        }
    }
</script>

Make sure to add an onLoad event to your <body> tag like this:

<body onLoad="positionFooter()">

Now when the page is fully loaded, the Javascript will try to determine the biggest column height by checking all three columns, and then it'll position the footer at the end of the page, below said three columns.

Works for sure in IE6 and Firefox 0.8 on XP. It's kinda hacky, and I didn't have much time to tinker with it on other systems. Let me know if you have a chance to check it on other configurations.

Thanks, Carlo Zottmann .

Personal tools