title: Cross Browser offsetWidth
body: <p>I've been having an issue with using offsetWidth across different browsers.  This difference in results is causing some strange layouts.  I've created a very small example that displays what I'm seeing. </p>
  
  <p><a href="http://jsbin.com/ezefiv/2/edit" rel="noreferrer" title="jsbin">jsbin</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table id="tbl"&gt;
    &lt;tr&gt;
      &lt;td&gt;Cell 1&lt;/td&gt;
      &lt;td&gt;Cell 2&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;button onclick="calc()"&gt;Calculate Offset Width&lt;/button&gt;
  
  &lt;div&gt;Cell 1 offsetWidth: &lt;span id="c1offWidth"&gt;&lt;/span&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>js</strong></p>
  
  <pre><code>function calc(){
    document.getElementById('c1offWidth').innerHTML =
        document.getElementById('tbl').children[0].children[0].offsetWidth;
  }
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <p><a href="http://meyerweb.com/eric/tools/css/reset/" rel="noreferrer">Erik Meyer's Reset CSS</a></p>
  
  <p>When I run this on chrome, safari, and opera the value returned for Cell 1's offset width is 72.  When I run this on firefox and IE9-10 the value returned is 77.</p>
  
  <p>I was under the  impression this was the best way to calculate the width of an element including padding and border. </p>
  
  <p>Is there a cross browser solution that will always return the same result?  I tried using jQuery but the results were even more confusing.</p>
  
  <p><strong>EDIT</strong>
  Because everyone is recommending outerWidth I made a jsbin for that also.  The results still differ across browsers.  Chrome returns 36; IE9-10 and Firefox return 39.</p>
  
  <p><a href="http://jsbin.com/ezefiv/3/edit" rel="noreferrer">jsbin updated</a></p>