CODEWITHSUNDEEP
cssoverflowcss-position
Wade D Ouellet
Wade D Ouellet

Reputation: 681

Negative Absolute Positioning, Removing Scrollbar

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

The top right corner animation is perfect except 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

Upvotes: 2

Views: 5460

Answers (3)

James
James

Reputation: 115

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.

Upvotes: -1

Austin
Austin

Reputation: 29

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

Upvotes: 2

prodigitalson
prodigitalson

Reputation: 60413

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.

Upvotes: 6

Related Questions