html - 将页面分为两个部分

Question

我有下面的html代码。我需要做的是将 wuiInPageNav 分成两部分。LeftArea 和 wuiMainPageNav 需要一直并排。LeftAre div 将保存我的 jstree 节点，而 wauiMainPageNave div 将保存我的图表和数据等。当我执行以下操作时，left 向左，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

更新

确保你没有做你的 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;}