css - 将 div 向左浮动，div 居中调整大小时不重叠

Question

我希望有一个左对齐的 div (Div 1) 和一个居中对齐的 div (Div 2)。

当用户调整窗口大小时，居中的 div (Div 2) 应保持居中，直到碰到 Div 1 的边缘。
除非 Div 1(左侧 div)的宽度加上 Div 2 宽度的一半大于浏览器宽度的一半，否则 Div 2(居中的 div)不应始终停靠在左侧。

有没有关于在没有 javascript 的情况下实现这一点的想法？

这是一个工作示例:http://jsfiddle.net/pjg8D/9/

<div id="fixedBar">
    <div id="div1"></div>
    <div id="div2"></div>
</div>


<!-- http://i42.tinypic.com/iqv5tu.jpg -->

#fixedBar {
    height: 50px;
    width: 100%;
    background: #f99;       

}

#div1 {
    width: 200px;
    height: 50px;
    background: green;
    float: left;
}

#div2 {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background: blue;
}

Answer 1

问题的解决方案是在容器 div 上使用 min-width。此宽度的比率计算如下:( Div1 宽度 + Div2 宽度的一半) x 2。

解决方案在这里:http://jsfiddle.net/pjg8D/16/