jQuery slideDown causes wrapper div to shift in firefox

Question

I have a div inside a containing div (i.e. a "wrapper" div). This wrapper div has its margins set to auto so it's centered on the page. When you click a button, another div inside the wrapper div is displayed using jQuery's slideDown function. However, when this happens, the wrapper div shifts a couple of pixels to the left, and shifts back when you click the button again to get the div to disappear via jQuery's slide up function. Here is my code, div.answer is the div inside the wrapper div that you show/hide by clicking the button

CSS:

    #wrapper {
        background: url(myimages/bground.jpg);
        text-align: center;
        margin: auto;
        width:1020px;
        border:0px solid red;
    }

    div.answer{
        border: 0px solid #5c5c5c;
        padding:3px;
        margin-left: 29px;
        margin-right: 29px;
        display:none;
    }  

Javascript:

    $('span.problemBullet').toggle(function(){
        $('div.answer').slideDown();
        $(this).html(' - ');
        $(this).css('padding','0px 2px 0px 2px');

    },
        function(){
            $('div.answer').slideUp();
            $(this).html(' + ');
            $(this).css('padding', '0px 0px 0px 0px');

        }

    );

"problemBullet" is a little button I created from a span element have that you click to get the div to show and hide

This works fine in Google Chrome and Safari.

You can see it in action here: Click me

Answer 1

Like pointed out in the comments this happens because sliding down this div increases the body's height to a point where it is bigger than the viewport, causing the scrollbar to appear and thus shifting the whole content to the left.

My best solution is to show the scrollbar by default with this css:

body {
    overflow-y: scroll;
}