Unable to get correct offset of floated div
<pre class="lang-html prettyprint-override"><code>&lt;div id="content"&gt;
&lt;div class="oddpost"&gt;
    &lt;div class="arrow"&gt;&lt;/div&gt;
&lt;/div&gt;
    &lt;div class="oddpost"&gt;
    &lt;div class="arrow"&gt;&lt;/div&gt;
&lt;/div&gt;
    &lt;div class="oddpost"&gt;
    &lt;div class="arrow"&gt;&lt;/div&gt;
&lt;/div&gt;
    &lt;div class="oddpost"&gt;
    &lt;div class="arrow"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<pre class="lang-javascript prettyprint-override"><code>$(function() {
    if (($(".oddpost").position().left + $(".oddpost").width()) &gt;= $("#content").width()) {
        $('.arrow').hide();
    }
});
</code></pre>

<p><a href="http://jsfiddle.net/Ek5Gy/52/" rel="nofollow">http://jsfiddle.net/Ek5Gy/52/</a></p>

<p>In the code, I have a div(<code>.arrow</code>) nested on another div(<code>.oddpost</code>). What I want to do is hide the <code>.arrow</code> of the left <code>.oddpost</code> only. The idea is <code>.arrow</code> hides when <code>.oddpost</code> is near the left side of <code>#content</code>.</p>

<p>I've tried using offset but it gives the same <code>offset().left</code> value on all the oddpost div so all the arrow div still hides, even the one on the right.</p>

<p>Can anybody tell me how to fix this?</p>
