title: Inconsistent behavior of "scrollWidth" between Webkit and Firefox
body: <p>I have a set of header divs that need to match the width of the content divs below them. In general, the content divs are thinner than the header divs, and they can vary in size.</p>
  
  <p>So, what I do is set the width of the header div to match the width of the content div. Then, because I want the header and content to be wide enough to not cut off any words, I check each header's "scrollWidth" property to see if it's larger than its "offsetWidth" property, and then set the content and header widths the header's scrollWidth.</p>
  
  <pre><code>header.style.width = tableCell.offsetWidth + "px";
  if (header.scrollWidth &gt; header.offsetWidth) {
      content.style.width = header.scrollWidth + "px";
      header.style.width = header.scrollWidth + "px";
  }
  </code></pre>
  
  <p>This works great with Safari and Chrome, but doesn't work at all in FireFox. With Firefox, "scrollWidth" returns the same value as the header's set width.</p>
  
  <p>"Sounds like a great time to use tables" you say, but I can't. The header needs to remain static on the top of the page.</p>
  
  <p>So, how can I get Firefox to return an equivalent value to scrollWidth under these conditions? I've tried setting the overflow of the header divs to "hidden" and "scroll," but that didn't effect anything.</p>