Negative Absolute Positioning, Removing Scrollbar

I am working on this site: http://waterwing.waterwing.ca/

The top right corner animation is perfect e开发者_C百科xcept for that it creates a horizontal scrollbar with the way it's positioned.

It's absolutely positioned -120px top and right. I'm just wondering how I can make it so it won't extend the body and will just hide itself once it hits the edge of the page so that there is no scrollbar.

The scrollbar seems to not be there on Windows Firefox but is there on Mac Firefox and Safari.

Thanks, Wade

wrap #corner in another div and set it to the dimension occupied by the end point of the animation as well as position absolute. set the overflow on this div to hidden that will keep it from bleeding off the page and triggering the scroll.

You can also just put overflow: hidden on the body, works the same way and saves you a div

Depending on your situation, but you can get scrollbars for a div, or for the whole page. When building a responsive website layout, I always write this CSS:

body {
    overflow-x: hidden;
}

And this prevents scrollbars appearing, cross-browser and cross-device.