Ribbon heading without extending scrolling area

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/