Getting div to run to the right side of the screen

Basically i'm trying to get a divider to run to the right edge of the screen (without overflow).

If you look here: http://gomysites.com and scroll down to the twitter 开发者_如何学Pythonsection you will see i've set the twitter panel to run off to the left edge of the screen (no matter the size).

Now i want to do exactly the same on the right side. If you notice the grey divider between the blog posts id like this to run to the right edge of the screen (no matter the size) without it adding a horizontal scroller.

I've tried setting the css for the divider exactly opposite as i did for the titter panel:

.widget_gomy_news .divider{
margin:30px -10000px 30px 0;
background:#f3f3f3;
height:30px;
float:right;
width:610px;
padding:0 10000px 0 0;
}

But it adds a horizontal scroller. So i did try adding overflow:hidden; to the body. Which removes the scroller but i can still scroll everything left and right with the mouse.

Anyone got any ideas how i can achieve what i'm after? or will i need to use some js to make this work?

Thanks in advance.

Just remove the -10000px right margin and the 10000px right padding and it works. What do you need that for?

Use overflow-x: hidden on the body element. This will prevent the horizontal scroll but may trip you up in older versions of IE - Tested in IE8 and Chrome.

Edit:

You could also write some jQuery to grab the Window viewport height/width like: $(window).height();, and size your entire page's "container" div accordingly. This will allow you to know what numbers you're working with for setting the negative/position margins in your "divider" hack.

I think i've sorted it. I wrapped all the page content inside a div and added overflow hidden to that (rather than body). This worked in everything except IE7, but i can do a simple work around for IE7. Thanks for all the replies, Jeff sent me down the right path thanks.