Ribbon heading without extending scrolling area - css

Question

I'm implementing a simple ribbon-like heading that extends off the content area (both left and right) displaying a 3d effect with an image background (no css3 tricks).
I tried floating, negative margins and finally relative positioning but my problem is that all the solutions I tried increased the content's scrollable width (extending it to the right). I'd like to keep my ribbon as a "background effect" keep the content's scrollable width.
Check out my simplified working example: http://jsfiddle.net/c5cVG/16/
body {
background: blue;
}
body>div {
width: 200px;
margin: 0 auto;
background: white;
}
body>div>p {
padding: 5px;
}
body>div>h2 {
overflow: hidden;
padding: 10px 20px 5px;
background: red;
width: 190px;
left: -15px;
position: relative;
}
If you set the viewport width below 215px, you can see that the left-edge extension of the red "ribbons" stay outside of the viewport, and cannot be scrolled inside using the horizonal scollbar.
I'd like to get the same effect on the right-edge extension (overflowing the white area), but it pushes the right edge of the scrollable area and makes itself scrollable.
Any help or demo would be appreciated.

Answer 1

OK, I found a solution that looks fine for me in this thread: https://stackoverflow.com/a/2650215/2084434 (answer by Nikolaos Dimopoulos)
Wrapping the whole content in another div and applying
#wrapper {
width: 100%;
overflow: hidden;
min-width: 200px;
}
works OK.
Here's the updated fiddle: http://jsfiddle.net/jJaxp/2/