Nested divs wrap in undesired priority

Question

I have a problem with how my nested divs behaves with line breaks. I have tried searching for this, but to no avail, since the problem is hard to put in words.

I have four divs nested as indicated below, all with display inline-block:

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

Now, the menu div and the content divs have flexible width that depens on the data loaded. When either content div gets too wide, I want the following to happen:

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

But instead I get the following:

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

It is very confusing when the menu div is tall enough to hide that any content was loaded whatsoever. Also, keeping the menu div width fixed would only be considered as a definite last resort. The divs could however be made floats instead of inline-blocks, if that would help.

Does anyone know a simple way to keep the layout as in fig. 2? I have tested that this still happens when either content div would fit as in fig 2 if the other content div was invisible.

edit:

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

Answer 1

Easy and simple add max-width for you div "content holder div", i could give you the numbers but you didnt give a jsfiddle.