Le div nidificate avvolgono in priorità indesiderata

Question

Ho un problema con il modo in cui i div nidificati si comportano con interruzioni di riga. Ho provato a cercare questo, ma senza successo, dal momento che il problema è difficile da mettere in parole.

Ho quattro div annidati come di seguito indicato, tutti con display inline-block:

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

Ora, il div menu e le div contenuti hanno larghezza flessibile che depens sui dati caricati. Quando uno dei due contenuti div diventa troppo largo, voglio che la segue per accadere:

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

Ma invece io ottenere il seguente:

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

E 'molto confusa quando il div menu è abbastanza alto per nasconderlo qualsiasi contenuto è stato caricato di sorta. Inoltre, mantenendo fissa la larghezza del menu div sarebbe considerata solo come ultima risorsa definitiva. Tuttavia, i div potrebbero essere fatti galleggianti invece di blocchi in linea, se ciò fosse di aiuto.

Qualcuno sa un modo semplice per mantenere il layout come in fig. 2? Ho verificato che questo si verifica ancora quando il contenuto div si adatterebbe come in fig 2 se l'altro contenuto div era invisibile.

edit:

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

Answer 1

facile e semplice add max-width per te div "titolare contenuti div", ho potuto dare i numeri, ma voi non ha ancora dare un jsfiddle.

Answer 2

loro passaggio a carri contribuirebbe a mantenere il layout che stai cercando

http://jsfiddle.net/duncan/pXdDy/

dando div contenuto interno

min-width:48%; 
margin:1%; 
float:left; 

li avrebbe sedersi accanto a vicenda fino a quando il contenuto viene abbastanza largo da spingerli verso il basso