Screen Flicker and bad resizing on window Resize
<p>Please see this jsFiddle for reference: <a href="http://jsfiddle.net/Surfer/Gk8FS/" rel="nofollow">(jsFiddle) Div Resizing</a> <em>[to see what I'm having the problem with, resize the <strong>Results</strong> pane]</em></p>

<p>Here is my jQuery code for this example:</p>

<pre><code>function resizeRightLeftDivs() {
    $('div.left, div.right').css('height',
                                 $('div.container').outerHeight(false) -
                                 $('div.header').outerHeight(false));
    $('div.left').css('width',
                      $('div.container').outerWidth(false) -
                      $('div.right').outerWidth(false));
}

$(document).ready(function() {
    resizeRightLeftDivs();

    $(window).resize(function() {
        resizeRightLeftDivs();
    });
});
</code></pre>

<p>As you can see from the fiddle and my code, what I'm trying to do here is resize the <code>&lt;div /&gt;</code> elements appropriately when the browser window is resized.</p>

<p>But for some reason in FireFox there is extreme flicker.  Not to mention half the time the left div isn't resized correctly (there's a gap between left and right divs).</p>

<p>And in IE it is too big by one pixel and the <code>div</code>s don't sit side by side.</p>

<p>How can I prevent this flicker, and the gap (FireFox)?  Is this even the best way to go about resizing elements when the browser window size changes?</p>
