CSS布局宽度固定宽度和流体右列

Question

我有一个固定的容器，比方说1120px。在这个容器里面，我有一个400px的左侧边栏，我需要一个右侧边栏，它从容器中伸出并触摸屏幕的右侧。这是一张解释我想要的布局的图片：

这是我到目前为止取得的进展：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%;
}

显然它不好，因为右侧边栏太宽而且出现水平滚动条。

Answer 1

您使用的图像与您想要的图像不符;我想也许你正在以错误的方式看待这个问题。如果右侧边栏溢出容器，固定宽度容器的重点是什么？

从你的形象来看，它看起来像你想要的......

<强> 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%;}

这将创建您使用过的图像插图。 j这里：http://jsfiddle.net/4JNX2/

Answer 2

添加相对于包装器的位置。试试这个

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%;
}