is CSS-only, full-width sidebar background possible? - html

Question

I'm building a fixed width website (using the classic wrapper with margin:auto), but I want the sidebar background to extend to the right end of the screen.
So far I've accomplished this:
HTML
<div id="wrapper">
<div id="left">Content area</div>
<div id="right">
<div id="actual-sidebar">
Sidebar
<span class="clearme"></span>
</div>
</div>
</div>
CSS
body {
background: #333;
color: #fff;
overflow-x: hidden;
}
#wrapper {
width: 500px;
height: 1200px;
margin: auto;
border: 2px dashed #fff;
}
#left {
width: 300px;
height: 500px;
float: left;
}
#right {
width: 175px;
height: 500px;
margin-left: 325px;
margin-right: -9999px;
padding-right: 9999px;
background: #777;
}
#actual-sidebar {
width: 100%;
height: 100%;
border: 2px dotted #f0f;
}
​
You can see it in action here:
http://jsfiddle.net/knjDV/
http://www.spazionegativo.it/layout-test/
Is this kind of "full-width sidebar" possible using css only?
In the example above, the actual sidebar width is highlighted by the pink border, and the rest is all padding and negative margin; worked in chrome but IE broke it so I've added overflow-x: hidden to fix it.
The problem is, click-dragging to the right will scroll the view even if there's nothing to select, eventually hiding the content. I can't seem to get past this problem.
Is there a fix to the "drag-n-scroll" issue, or an entirely different way to accomplish this?

Answer 1

If you add to #right{ position: fixed;} that will get rid of the horizontal scrollbar. Is that acceptable?

Answer 2

Use CSS3 gradients as a background for the body (with the same color as the sidebar) to create the illusion that it extends to the edge of the screen.
.sidebar {
background: salmon;
}
body {
background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(50%, #fa8072), color-stop(50%, #ffffff));
background: -webkit-linear-gradient(right, #fa8072 50%, #ffffff 50%);
background: -moz-linear-gradient(right, #fa8072 50%, #ffffff 50%);
background: -o-linear-gradient(right, #fa8072 50%, #ffffff 50%);
background: linear-gradient(right, #fa8072 50%, #ffffff 50%);
}​
Demo