title: What is different with window and div widths between firefox and IE
body: <p>I have a web page that uses a scrolling div to display table information. When the window is resized (and also on page load), the display is centered and the div's scrollbar positioned to the right of the page by setting its width. For some reason, the behaviour is different under firefox than IE. IE positions/sizes the div as expected, but firefox seems to make it too wide, such that the scrollbar begins to disappear when the window client width reaches about 800px. I'm using the following methods to set the position and size: </p>
  
  <pre><code>function getWindowWidth() {
    var windowWidth = 0;
    if (typeof(window.innerWidth) == 'number') {
      windowWidth=window.innerWidth;
    }
    else {
      if (document.documentElement &amp;&amp; document.documentElement.clientWidth) {
        windowWidth=document.documentElement.clientWidth  ;
      }
      else {
        if (document.body &amp;&amp; document.body.clientWidth) {
          windowWidth=document.body.clientWidth;
        }
      }
    }
    return windowWidth;
  }
  
  function findLPos(obj) { 
    var curleft = 0; 
    if (obj.offsetParent) { 
      curleft = obj.offsetLeft 
      while (obj = obj.offsetParent) { 
        curleft += obj.offsetLeft 
      } 
    } 
    return curleft; 
  }
  
  var bdydiv;
  var coldiv;
  
  document.body.style.overflow="hidden";
  window.onload=resizeDivs;
  window.onresize=resizeDivs; 
  
  function resizeDivs(){
    bdydiv=document.getElementById('bdydiv');
    coldiv=document.getElementById('coldiv');
    var winWdth=getWindowWidth();
    var rghtMarg = 0;
    var colHdrTbl=document.getElementById('colHdrTbl');
    rghtMarg = parseInt((winWdth - 766) / 2) - 8;
    rghtMarg = (rghtMarg &gt; 0 ? rghtMarg : 0);
    coldiv.style.paddingLeft = rghtMarg + "px";
    bdydiv.style.paddingLeft = rghtMarg + "px";
    var bdydivLft=findLPos(bdydiv);
    if ((winWdth - bdydivLft) &gt;= 1){
      bdydiv.style.width = winWdth - bdydivLft;
      coldiv.style.width = bdydiv.style.width;
    }
    syncScroll();
  }
  
  function syncScroll(){
    if(coldiv.scrollLeft&gt;=0){
      coldiv.scrollLeft=bdydiv.scrollLeft;
    }
  }
  </code></pre>
  
  <p>Note that I've cut out other code which sets height, and other non-relevant parts. The full page can be seen <a href="http://site1.funddata.com/mozilladivresize.html" rel="nofollow noreferrer">here</a>. If you go to the link in both IE and firefox, resize width until "800" is displayed in the green box top-right, and resize height until the scrollbar at the right is enabled, you can see the problem. If you then resize the IE width, the scrollbar stays, but if you resize the firefox width wider, the scrollbar begins to disappear. I'm at a loss as to why this is happening....</p>
  
  <p>Note that AFAIK, getWindowWidth() should be cross-browser-compatible, but I'm not so sure about findLPos().... perhaps there's an extra object in Firefox's DOM or something, which is changing the result??</p>