停止2浮动DIVS从崩溃而在另一个

Question

这可能很简单，但我只是无法包裹我的头。

CSS

#nav_bar{ 
    max-width:1000px; 
    height:41px; 
    margin: 0 auto; 
    background-color:yellow; 
} 

#left{ 
    float:left; 
    min-width:200px; 
    height:41px; 
    background-color:red; 
} 

#right{ 
    float:right; 
    min-width:500px; 
    height:41px; 
    background-color:black; 
} 

HTML

<div id="nav_bar"> 

    <div id="left"> 
    </div> 

    <div id="right"> 
    </div> 

</div> 

我会在颜色解释。基本上我想让红框左移，右框右移在黄框内。但是，当我缩小浏览器窗口时，所有东西都会崩溃，而黑色盒子会在红色之下（在黄色之外）。我知道这听起来很基本，但我不希望它太崩溃，我会很高兴，如果它可以完全保持不动而不移动，并且浏览器像通常那样水平滚动，如果窗口对于内容来说太小。

谢谢:)

Answer 1

你需要给#nav_bar的最小宽度大到足以容纳两个子元素：

#nav_bar{ 
    ... 
    min-width: 700px; 
} 

DEMO

Answer 2

只需添加宽度：1000像素或者你需要多少它在容器上。在这种情况下，“nav_bar”。

Link to JSFiddle

#nav_bar{ 
    max-width:1000px; 
    width:1000px; 
    height:41px; 
    margin: 0 auto; 
    background-color:yellow; 
}