居中 div，具有固定宽度、固定位置侧边栏

Question

我想创建一个 3 列的布局。中心具有固定宽度（例如 500px）。侧边栏需要有一个固定的位置，以便其内容始终保持可见。此内容必须浮动在靠近中间列的位置。

这是我到目前为止想出的。不幸的是，我无法修复侧边栏。代码复制如下。

.HTML：

<div class="wrap">
    <div id="pixelLeft">
        <div id="pixelLeftContent">
            Column 1 has to be fixed, with liquid width.
            It's content needs to be floated to left;
        </div>
    </div>
    <div id="bannerCenter">
    </div>
    <div id="pixelRight">
        <div id="pixelRightContent">
            Column 2 has to be fixed, with liquid width.
            It's content needs to be floated to right;
        </div>
    </div>
</div>
<div style="clear:both;"></div>

.CSS：

*{
    margin:0;
    padding:0;
}
#bannerCenter {
    background:#ddd;
    width: 500px;
    float:left;
    height: 1000px;
}
#pixelLeft {
    background:#999;
    width: calc(50% - 250px);
    float:left;
}
#pixedLeftContent {
    width: 50%;
    float:right;
}
#pixelRight {
    background:#999;
    width: calc(50% - 250px);
    float:right;
}
#pixelRightContent {
    width: 50%;
    float:left;
}
#pixelLeft, #pixelRight {
    height: 400px;
}

Answer 1

尝试这样的事情，我认为 css 不支持 % 和 px 一起......它可能会解决您的问题。

像这样修改你的 css：

#pixelLeft{
    width: 50%;
    float:left;
    position: relative;
}
#pixelLeftContent{
     background:#999;
     float: right;
     margin-right: 250px;
}