Why does sliding (collapsing) from Right To Left create a scrollbar where LTR doesn't?

tldr: look here: http://joon.be/dalida/ hover over the yellow 'town' and over the blue 'town'. The yellow one doesn't create a scrollbar, the right one does. Why?

Long version: I have a line entering from the left side to point at something when it is hovered over. This wor开发者_C百科ks. I'm trying to do the same from the right side, same principle just mirrored, and have figured out how to do this, but it has the weird side effect of creating a horizontal scroll bar, since the image is partially out of the screen. On the left side, this does not happen, even though it works almost exactly the same afai understand.

Here's the left, working, code:

$('.dalidatown').hover(function(){
    $('.dalidapath').stop().animate({width: '903px'});
},function(){
    $('.dalidapath').stop().animate({width: '0px'});
});

The 'path' is a div that has the line as background. Here's the CSS for this:

.path {
    position: absolute;
    border: 0px;
}

.dalidapath {
    width: 0px;
    height: 83px;
    z-index: 10;
    top: 130px;
    left: 50%;
    margin-left: -1110px;
    background-image:url('bin/dalidapath.png'); 
}

Now on the right side, I couldn't just use width, I had to play with the margin as well, so it looks like this:

$('.therapietown').hover(function(){
    $('.therapiepath').animate({width: '903px'}, {queue: false}).animate({marginLeft: '97px'}, {queue: false});
},function(){
    $('.therapiepath').animate({width: '0px'}, {queue: false}).animate({marginLeft: '1000px'}, {queue: false});
});          

this does everything I Want it to, other than create the scrollbar... Here's the relevant css:

.path {
    position: absolute;
    border: 0px;
}

.therapiepath {
    width: 0px;
    height: 83px;
    z-index: 10;
    top: 130px;
    left: 50%;
    margin-left: 1000px;
    background-image:url('bin/therapiepath.png'); 
    background-position:right top;
}

So you can see it live here: http://joon.be/dalida/

The difference is that the browser won't scroll any farther left than 0. To the right, the page can expand as far as it needs to. You can fix thsi by setting overflow: hidden, though that may end up causing other issues, depending on your page.

Simple answer, there is enough screen real estate for the left side animation to not require a scrollbar. Your solution will likely be a CSS one:

Try adding overflow-x:hidden; to the body

idk but body{overflow: hidden} will do the trick for the scroll bars appearing. I would advise against that, however, and instead create a wrapper that has a width of 100%. then apply the overflow property to that.

A scrollbar didn't show up for my, but what you could do is on the body or html, add an overflow-y property with a value of hidden and that will make sure that the scrollbar doesn't appear.

Update: If you're worried about supporting IE you may want to just use overflow:hidden; depending on how supportive you want to be of varying window widths.