並排對齊兩個div

Question

我有這段HT​​ML代碼。 我喜歡wuiLeftArea和wuiMainArea始終保持並排。 現在，當縮小瀏覽器窗口時，WuiMainArea div將低於wuileftArea。 有沒有辦法強迫wuiMainArea 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的分割