将页面划分为两部分

Question

我有以下的html代码。我需要做的是将wuiInPageNav分成两部分。 LeftArea和wuiMainPageNav，他们需要一直并肩。 LeftAre div将保存我的jstree节点，wauiMainPageNave div将保存我的图表和数据等。当我执行以下操作时，左移左侧，wuiMainPageNav移至右侧。但是，当我调整浏览器窗口的大小时，wuiMainPageNave会下降到最低点。我如何确保LeftArea始终位于左侧，wuiMainPageName始终位于右侧，浏览器窗口的大小和大小？在这里丢失。有任何想法吗？

div id="wuiLeftArea"> 
     <div id="wuiLefthandNavRoot"> 
      <h2 class="wui-hidden">Section Navigation</h2> 
      <h3 class="wui-navigation-title">Applicaion</h3> 
      <div id=tree></div> 
     </div> 
</div> 


<div id=wuiMainArea> 
    <div id=wuiMainContent> 
     <div id=wuiInpageNav> 

       <div id="top_chart" class="center"> </div> 

     </div> 
    </div> 
</div> 

CSS：

#wuiInpageNav {left:300px; float:right; width:1200px !important; overflow:hidden; } 
div#wuiLeftArea{ 
    float: left; 
    width: 16.25em; 
    background-color: #f2f4f5; 
    padding-top: .5833em; 
    position: relative; 
} 

Answer 1

UPDATE

确保你不这样做你的CSS在线： http://jsfiddle.net/FE79R/1/

HTML

<div id=wuiMainArea> 
    <div id=wuiMainContent> 
     <div id=wuiInpageNav> 
      <div id="left"> 
       <div id="tree">tree</div> 
      </div> 
      <div id=main> 
       <div id="top_charts" class="center"> </div> 
        <div class="main1"> 
         <div id="top_chart1" class="center">top chart 1</div> 
         <div id="top_chart2" class="center">top chart 2</div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

#wuiInpageNav { width:300px; overflow:hidden; } 
#left { width:100px; float:left; position:relative; background-color:#f2f4f5;} 
#main { width:200px; float:left; background-color:orange;}