html – 嵌套的div包含在不需要的优先级中

我有四个嵌套如下所示的div,都有显示内联块：

-------- ---------------------------
| menu | | content holder div      |
| div  | | ----------- ----------- |
|      | | | content | | content | |
|      | | | div 1   | | div 2   | |
|      | | |         | |         | |
-------- | ----------- ----------- |
         ---------------------------

现在,菜单div和内容div具有灵活的宽度,取决于加载的数据.当任一内容div太宽时,我希望发生以下情况：

-------- ----------------------
| menu | | content holder div |
| div  | | -----------        |
|      | | | content |        |
|      | | | div 1   |        |
|      | | |         |        |
-------- | -----------        |
         | ------------------ |
         | | content div 2  | |
         | |                | |
         | |                | |
         | ------------------ |
         ----------------------

但相反,我得到以下内容：

--------
| menu |
| div  |
|      |
|      |
|      |
--------
---------------------------------
| content holder div            |
| ----------- ----------------- |
| | content | | content div 2 | |
| | div 1   | |               | |
| |         | |               | |
| ----------- ----------------- |
--------------------------------|

当菜单div足够高以隐藏任何内容被加载时,这是非常令人困惑的.此外,保持菜单div宽度固定只会被视为一个明确的最后手段.然而,div可以制成浮动而不是内联块,如果这有帮助的话.

有谁知道一种简单的方法来保持布局,如图. 2？我已经测试过,如果另一个内容div不可见,当内容div适合图2时,这仍然会发生.

编辑：

http://jsfiddle.net/pzHhL/1/