CSS: Position: Absolute Right without horizontal scroll

I have a demo of this layout here: http://jsfiddle.net/LwRva/

What I'm trying to achieve is a layout that is 680px wide for most users, but only 480px - without a horizontal scrollbar for those using a smaller resolution. (Imagine 680px is actually 1180px, and 480px is 980px - just for using this in JSFiddle.)

It's essentially a 3-column开发者_开发知识库 div layout, where the left and right columns are hidden if the page can't fit them on.

I already have the left column working exactly as I want it to, it doesn't alter the horizontal scrollbar if it doesn't fit on the page. My problem is with the right column. Due to the fact that a negative margin-right doesn't work in the same way.

Any ideas?

@RoToRa is correct for the media. A possible css for your layout could be the following:

@media screen and (max-width: 580px) {.featured-box-left {display:none} }
@media screen and (max-width: 480px) {
.featured-box-left,.featured-box-right{display:none;}
}

When the screen's width is 580px then hide .featured-box-left. If the Screen is 480px or lower then hide both left and right.

Demo: http://jsfiddle.net/LwRva/6/

Generally what you are trying tou achieve is call Responsive Web Design. A List Apart has a great article you can find informative: http://www.alistapart.com/articles/responsive-web-design/