How can I calculate the height of an element cross-browser using jQuery?
<p>I created a plugin to bottom-align a element. In it's simplest form I did this:  </p>

<ol>
<li>Get height of outerElement (DIV)  </li>
<li>Get height of current element  </li>
<li>result = outerHeight - height of current element  </li>
<li>sett CSS attribute 'top' = result.  </li>
</ol>

<p>And it works... in Firefox and IE8, but not in Opera or Google Chrome.</p>

<p>I'm guessing it has to do with borders, padding and margin. So what do I have to do in order to make it work cross-browser?</p>

<p><strong>UPDATE</strong><br>
Code has been revised and is working now.</p>

<pre><code>(function($){
    $.fn.alignBottom = function() 
    {

        var defaults = {
            outerHight: 0,
            elementHeight: 0
        };

        var options = $.extend(defaults, options);
        var bpHeight = 0; // Border + padding

        return this.each(function() 
        {
            options.outerHight = $(this).parent().outerHeight();
            bpHeight = options.outerHight - $(this).parent().height();
            options.elementHeight = $(this).outerHeight(true) + bpHeight;


            $(this).css({'position':'relative','top':options.outerHight-(options.elementHeight)+'px'});
        });
    };
})(jQuery);
</code></pre>

<p>The HTML could look something like this:</p>

<pre><code>div class="myOuterDiv"&gt;
    &lt;div class="floatLeft"&gt; Variable content here &lt;/div&gt;
    &lt;img class="bottomAlign floatRight" src="" /&gt; &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>and applying my jQuery plugin:</p>

<pre><code>jQuery(".bottomAlign").alignBottom();
</code></pre>
