Question

Please see this jsFiddle for reference: (jsFiddle) Div Resizing [to see what I’m having the problem with, resize the Results pane]

Here is my jQuery code for this example:

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();
    });
});

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

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).

And in IE it is too big by one pixel and the divs don’t sit side by side.

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?

Answer 1

I figured out what was causing this issue. It turns out the gap was from the scrollbar appearing and then disappearing. The solution was to hide the scrollbar.

Solution

body {
    overflow: hidden;
}