Position image absolute right with no scroll bar

[Jaace]

I feel like this is a stupid question…and something I should know already, but I don’t.
I’m trying to position an image absolutely to the right, negatively a bit so that it pops a little past the page border. You can actually refer to the CSS-tricks tag in the upper left. Notice that when you make your browser window smaller it cuts the tag off a bit but there is no horizontal scroll bar? That’s what I want…except I want that to happen on the right.

I’ve made my page 960px in width, margin: 0 auto, but when I position this image to the right past the border a little, I get a scroll bar before the 960px mark, right where the image starts getting cut off.

What is the correct way to handle this behavior?

[Jaace]

Huh? Did you even read my post? I said it doesn’t work the same on the right hand side. I have already tried it the same. Your response really frustrates me; why did you even reply?

[Jaace]

Okay…look; I don’t know why you keep posting on my thread, you obviously don’t want to help and clearly don’t know what you’re talking about. "Encouraging" someone to think for themselves isn’t accomplished by a snarky response to their question.

Secondly, people don’t come to forums when they haven’t exhausted what resources they have or have already spent a lot of time searching for the fix to the issue…at least I have.

I came here for help and all I get from you is grief. Thanks for nothing.

I will restate my issue for you in a way you will hopefully understand and maybe someone who has some working knowledge of CSS:
My problem isn’t actually positioning the element, I have done that. It’s easy. My problem is that a horizontal scroll bar appears ONLY WHEN I DO THIS ON THE RIGHT HAND SIDE. Not on the left.

How do I make the horizontal scroll bar NOT APPEAR?

Thanks.

[Jaace]

Where in that article does it reference horizontal scroll bars? The answer is that it doesn’t, it was rhetorical.
And please stop insulting me.

I also edited this page with firebug just now and moved the tag to the right instead of the left, with the same pixel value. A scroll bar appears on the bottom of my browser window, does it not for you? What browser are you using?

[blue642]

I firebugged the tag over to the right and got the scrollbar as well.

This is a good questionm, the only way I can think of preventing scrolling is

Code:

overflow: hidden;

but that would negate the effect you’re going for.

maybe a creative background image would be your only option… I’d have to see the design to see if I would have any clue how to work that out though.

[Jaace]

Hi blue642,

Yeah I’ve tried putting overflow hidden on the body and html elements but then I get absolutely no horizontal scroll, even for the main content. Your suggestion of making this part of the body background is probably the only surefire way to do this right now. Thanks! :D

[pim]

I just came about this page looking for the same thing, but I found the answer on StackOverflow: you have to set overflow-x: hidden on the enclosing element that stretches out to infinity. Putting it on the body is a bad idea if you don’t specify a width on the body: as you noticed, you will never see scrollbars appear and someone with a small screen (mobile) will not able to scroll your page. So put it on another element and let the scrollbars appear for parts that are of your page width.

So it’s definitely possible, I just see it working here in Webkit.

[joshuanhibbert]

@Hompimpa To save a few bites you could remove margin-right: -10px; and simply use right: -10px;

[Author]

Posts