CSS layout width fixed width and fluid right column - css

Question

I have a fixed with container, lets say 1120px. Inside this container, i have a left sidebar which is 400px, and i need a right sidebar which is expanding from the container and touching the right side of the screen. Here is an image explaining the layout i want:
This is the progress i made so far: http://jsfiddle.net/UvxK8/
#wrapper {
background:#f0f0f0;
margin:0 auto;
width:400px;
overflow:hidden;
}
#wrapper .left {
width:100px;
float:left;
height:600px;
background:#333;
}
#wrapper .right {
position:absolute;
margin-left:100px;
height: 650px;
background: green;
min-width:100%;
}
Obviously its not good, because the right sidebar is too wide and a horizontal scrollbar appears.

Answer 1

The image you've used doesn't match your desicription of what you want; I think maybe you're looking at this the wrong way. If the right sidebar spills beyond the container, what's the point of the fixed width container at all?
From your image, it looks like what you want is...
HTML
<div id="header"><h1>Content here.</h1></div>
<div id="container">
<div id="container-left">
<p>Content here.</p>
</div>
<div id="container-right">
<p>Content here.</p>
</div>
</div>
CSS
#header {width:1120px;}
#container {width:100%; min-width:100%;}
#container-left {width:400px; float:left; }
#container-right {width:100%; min-width:100%;}
This will create the image illustration you've used. jFiddle here: http://jsfiddle.net/4JNX2/

Answer 2

Add position relative to your wrapper. try this
HTML
<div id="wrapper">
<div id="left">
</div>
<div id="right">
</div>
</div>
CSS
#wrapper
{width:1120px;
background:#096;
margin:0 auto;
position:relative;
}
#wrapper #left {
width:10%;
float:left;
height:600px;
background:#333;
}
#wrapper #right {
position:absolute;
margin-left:10%;
height: 650px;
background: green;
min-width:95%;
}