.width() not giving consistent results
<p>I'm getting two different values for the same <code>selector.width()</code> and I try to figure out how / why. </p>

<p>Pseudo code:</p>

<pre><code>&lt;div id="wrapper"&gt;
&lt;ul&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>I have a link that toggles the width of the list items between <code>$('#wrapper').width()</code> and <code>$(window).width()</code>. More or less regular view to fullscreen and back. If the <code>#wrapper</code> is a fixed width (e.g., <code>width=500px</code>) everything is fine. </p>

<p>However, if the wrapper is (for example) <code>width:50%</code> then I get unexpected results. The <code>.width</code> is fine (read: correct) when I first display the page. That is, prev / next controls etc line up correctly. If I toggle to fullscreen and then come back again to regular view the <code>.width</code> value is a couple/few pixels less. I've tried the <code>width=X%</code> with different value for <code>X</code> and the difference changes. That is, it's not fixed. </p>

<p>Padding and margins are set to zero so I don't think that's it. </p>

<p>Also, I have a <code>$(window).resize(function()</code> and if I nudge the window just a bit then the width reading corrects itself. Even if I open Firebug in the bottom is fixes itself. </p>

<p>I understand the pseudo code is vague. I'm just hoping to get some thoughts and direction on how I might be able to pin point where the problem is so I can fix it. </p>
