css - 侧边栏和内容不能正确调整宽度

Question

我目前正在用我实际上非常基础的 CSS 兜圈子。我正在为邮件客户端编写一个前端，并得到一个包含侧边栏和“innerContainer”的主(正文)容器，它应该填充侧边栏之后留下的空间。

重要的 HTML:

    <div id="outerContainer">
        <div id="sideBar">
        </div>
        <div id="innerContainer">
            <!-- not important ;D -->
        </div>
    </div>

重要的 CSS:

#sideBar {
    margin: 4px 2px 4px 4px;
    height: 644px;
    width: 14%;
    min-width: 220px;
    border-radius: 4px;
    background-color: #fff;
    float: left;
}

#innerContainer {
    margin: 4px 4px 4px 2px;
    height: 644px;
    border-radius: 4px;
    background-color: #fff;
    float: right;
}

我目前正在尝试让客户端通过不使用#innerContainer 规则中的任何宽度属性来确定完美的宽度。使用它，它只是 0px，即使边距应该在两个元素之间留出 4px 的空间。使用固定宽度(或百分比)会使将屏幕分辨率更改为任何宽屏时看起来很糟糕。

我将不胜感激任何提示，随时请求更多代码、屏幕截图或类似内容。提前致谢!

编辑:JSFiddle

Answer 1

#sideBar {
  float:left;
}
#innerContainer {
  display:table-cell;
  zoom:1;/*for IE*/
}

检查这个 - http://jsfiddle.net/fRBWe/11/