并排对齐两个div

Question

我有这块html代码。我喜欢wuiLeftArea和wuiMainArea在任何时候都保持并排。现在，当缩小窗口时，WuiMainArea div将低于无风区域。有没有办法迫使wiMainArea div始终保持正确？

<div id="wuiLeftArea"> 
     <div id="wuiLefthandNavRoot"> 
      <div id="tree"> 
      </div> 
    </div> 
</div> 

<DIV id=wuiMainArea sizcache="5" sizset="1"> 
    <DIV id=wuiMainContent sizcache="5" sizset="1"> 
     <DIV id=wuiInpageNav sizcache="5" sizset="1"> 
       <DIV id=chart class=wui-inpage-container style="float:right; width: 1200px;min-height:500px;display: block; overflow: hidden;"> 
       <p > this is the area to put charts. this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
         this is the area to put charts. 
       </p> 
      </DIV> 
     </DIV> 
    </DIV> 
</DIV> 

Answer 1

这将始终发生，除非在容器上有固定的大小或溢出被明确设置;否则，无论何时调整容器大小，它都会重新安排其子项以适应宽度方向进入其体内。

Answer 2

http://jsfiddle.net/XCEjf/

.wui-inpage-container { 
    width: 50%; 
} 

通过使用相对宽度你让浮子总是在页面宽度的房间，防止缠绕。

Answer 3

使用基于百分比的长度。如果左侧的容器构成页面宽度的25％，主容器构成75％的宽度，那么无论浏览器变得多小，都会有1/4 3/4分割