I guess I have to start this by saying I'm not convinced this is the best way to do this -- but then, I don't guarantee anything I've coded is the *best* way to do anything. But it goes doubly-so for this bit of code. The conundrum was how to dynamically set the height for the footer. Figuring this out has *really* been nasty. The site's current layout features a header and a footer for a very "horizontal" look. Some Web forms have content that spills farther than the window does at a particular resolution, making scrolling necessary. The rub was that content that fit just fine at 1024x768 looked bad at 800x 600; assigning the footer div positioning to "absolute" with the bottom set to 0px meant that if I maximize the browser window, I'm left with the footer cutting my content in half. My solution was to create a div called "divContent" which encompassed my "divLeft" and "divRight" (divLeft is where the content goes; divRight contains the navigation stuff). Next was to set the positioning for the footer div to "relative." So the theory is, if I can dynamically adjust the height of divContent, the footer should attach to the bottom if it and we'll be good to go. The rules are: (1) If the window height is larger than the height of divLeft, that means we've more window than we do content, so set the footer across the bottom of the window. (2) If divLeft is longer than the window, it means we've more content than we do window, so set the footer across the bottom of divLeft. Here's how the code turned out. The final touch, after lots of monkeying about, was to place a call to the function from the tag of its master page, using the onmousemove event handler. The onLoad event handler would suffice for an initial load, but would not be called if the browser is resized. the onmousemove event handler will do that for us by calling the function with each mouse move -- it's WAY overkill, but it guarantees that the footer will get repositioned when the browser is resized. This solution is not yet perfect, however. There seems to be some "jumping" happening when a Web form is first loaded. Once the user's mouse passes over the form, the anomaly is immediately corrected, and this correction produces a detectable (and annoying) "jump." The answer to this: calls to the function BOTH in the onload AND onmouseover event handlers in the tag: This tackles the "jump" problem seen primarily in Firefox. I was having a problem with how IE6 was treating the footer, but it turned out to be a CSS problem instead of a JavaScript problem. I had values for max-height and min-height set, but the value for simple height was commented out. Once restored, IE6 started behaving. Whew! UPDATE [2/11/2007]: Tested the site using Opera 9.10. Messy. I modified the JavaScript for this footer code to make a condition solely for Opera. I wouldn't call it pretty, but... function setContentHeight() { if (window.opera){ var intWinH = window.innerHeight - 110; var intLeftH = document.getElementById("divLeft").offsetHeight; document.getElementById("divContent").style.height = intWinH -25; if (intWinH < intLeftH){ document.getElementById("divContent").style.height = intLeftH; } } else if (!document.all){ //Firefox var intWinH = window.innerHeight - 110; var intLeftH = document.getElementById("divLeft").offsetHeight; document.getElementById('divContent').style.setProperty('height', (intWinH - 25) + 'px', null); if (intWinH < intLeftH){ document.getElementById('divContent').style.setProperty('height', (intLeftH + 10) + 'px', null); } } else if (document.all){ //IE var intWinH = document.documentElement.clientHeight - 110; var intLeftH = document.getElementById("divLeft").offsetHeight; document.getElementById("divContent").style.height = intWinH - 10 if (intWinH < intLeftH){ document.getElementById("divContent").style.height = intLeftH; } } I guess it's important to say at this point that I'm not "supporting" Opera - at least not yet - mostly because their share of the market is significantly smaller even than Firefox's, and because Opera doesn't care for other JavaScript I have in the site working fine in the other models. This has made me aware, however, of another flaw I should correct in the above code: using document.all isn't a smart way to differentiate between FF and IE, because Opera was consuming the code as it was originally written. I'd be better off using the Navigator object instead. Contact me using the site's contact form if you have questions or suggestions. Feel free to use the code in your projects. A shout out in your project would be thoughtful. Also, drop me a line and let me know how you might have tweaked things to better suit your needs. Finally, I wouldn't profess to be THE expert on matters represented in my code -- so drop me a line if you have constructive suggestions, too. I'd like to hear from you! Best, halfgk copyright 2007 halfgk.com