防止DIV容器进入浮动菜单

Question

我有一个DIV，其中包含我网站的内容。在左侧有一个菜单，其位置设置为float。当我重新调整浏览器的大小时，容器会被放在盒子下面，看起来非常糟糕。

这是它的样子：

我试图将所有相关的HTML和CSS放在这个小提琴中：http://jsfiddle.net/Dugi/qZ67C/

如何使DIV容器在浮动菜单中变小，而不是在它之下呢？

Answer 1

您可以将.container设置为向左浮动，然后增加margin-left，直到它从它下面移出。您还可以缩小.container的宽度。我在玩小提琴时都工作，但你必须调整你的桌子。

以下是fiddle，其中.container左侧浮动，margin-left大到足以将其滑出。

以下是fiddle，其中包含较小的.container。

Answer 2

挑战在于.sidebar上的宽度百分比，还有最小宽度。

一种解决方案是在.outer上放置最小宽度。这样可以防止.content在.sidebar.下滑落，但会导致.outer溢出视口并在视口大小低于750时产生滚动条（减去.outer边距） ）像素。

这是您在.outer上设置最小宽度到750px的简单更改的小提琴：http://jsfiddle.net/qZ67C/5/