Невозможно отобразить большую структуру дерева с divs

Question

На странице JSP мы отобразили структуру дерева, используя вложенные divs.Width каждого div вычисляется во время выполнения. Во время выполнения предоставляется только ширина «div1», а другая ширина div вычисляется с использованием этого во время выполнения. Вот, я установил его на 200 пикселей.

<div id="div1" style="background-color:#EEEEEE;height:200px;width:200px;float:left;overflow:auto"> 
    <div id="div2" style="background-color:yellow;height:200px;width:190px;"> 
     <div id="div3" style="background-color:blue;height:180px;width:180px;"></div> 
     <div id="div4" style="background-color:red;height:180px;width:50px;"></div> 
    </div> 
</div> 

Теперь вопрос «div4» не добавляется справа от «div3». Он попадает в следующую строку. Из-за этой структуры дерева нарушается. И если я увеличиваю ширину «div2», то она будет помещена вправо, но тогда горизонтальная полоса прокрутки подходит для всех случаев, где это не требуется. Я заметил поведение div, что он размещает текст по вертикали, а не по горизонтали. Любая идея, как я могу заставить ее работать?

Answer 1

Это вы имели в виду? Я создал jsfiddle: http://jsfiddle.net/r6sPY/

Div4 никогда не будет добавлен справа от div3 до тех пор, пока ширина div2 будет меньше суммы div3 и div4. Но опять же, я не уверен, что это то, что вы имели в виду.

<div id="div1" style="background-color:#EEEEEE;height:200px;width:200px;float:left;overflow:auto"> 
<div id="div2" style="background-color:yellow;height:200px;width:190px;"> 
    <div id="div3" style="background-color:blue;height:180px;width:130px;float:left;"></div> 
    <div id="div4" style="background-color:red;height:180px;width:50px;float:left;"></div> 
</div> 
</div>