layouthandler - standards compilant 100% width and 100% height tableless web page layout template

Description
layouthandler.htm
layouthandler.js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Page</title>

    <script type="text/javascript">
        function InitLayout()
        {
            var Layer = document.getElementsByTagName('div');
            var DynamicHeight = document.body.clientHeight;
            var DynamicWidth = document.body.clientWidth; 

            for (var i = 0; i < Layer.length; i++)
            {
                if (Layer[i].className == 'BannerLayer')
                    DynamicHeight -= Layer[i].offsetHeight;
                else if (Layer[i].className == 'MenuLayer')
                    DynamicWidth -= Layer[i].offsetWidth;
            }

            for (var j = 0; j < Layer.length; j++)
            {
                if (Layer[j].className == 'BannerLayer')
                    Layer[j].style.width = document.body.clientWidth + 'px';
                else if (Layer[j].className == 'MenuLayer')
                    Layer[j].style.height = DynamicHeight + 'px';
                else if (Layer[j].className == 'ContentLayer')
                {
                    Layer[j].style.width = DynamicWidth + 'px';
                    Layer[j].style.height = DynamicHeight + 'px';
                }
            }
        }

        function DelayedInitLayout()
        {
            self.setTimeout('InitLayout()', 1);
        }

        if (window.addEventListener)
        {
            window.addEventListener("load", DelayedInitLayout, false);
            window.addEventListener("resize", DelayedInitLayout, false);
        }
        else if (window.attachEvent) // ie
        {
            window.attachEvent('onload', DelayedInitLayout);
            window.attachEvent('onresize', DelayedInitLayout);
        }
    </script>

    <style type="text/css">
        html, body
        {
            margin: 0px;
            padding: 0px;
            border: none;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .BannerLayer
        {
            white-space: nowrap;
            clear: both;
        }
        .MenuLayer
        {
            width: 160px;
            overflow: auto;
            float: left;
        }
        .ContentLayer
        {
            overflow: auto;
            float: left;
        }
    </style>
</head>
<body>
    <div class="BannerLayer">
        <!-- Header/Banner -->
    </div>
    <div class="MenuLayer">
        <!-- Submenu -->
    </div>
    <div class="ContentLayer">
        <!-- Content -->
    </div>
    <div class="BannerLayer">
        <!-- Footer -->
    </div>
</body>
</html>