Dividing page into two sections [duplicate] - html

Question

This question already has answers here:
CSS: Vertical column layout without <table>
(3 answers)
Closed 9 years ago.
I have the below html code. What I need to do is split wuiInPageNav into two sections. LeftArea and wuiMainPageNav and they need to be side by side all the time. LeftAre div will hold my jstree nodes and wauiMainPageNave div will hold my charts and data etc. When I do the following, left goes left and wuiMainPageNav goes to the right. But when I resize the browser window, make it smaller, wuiMainPageNave goes down to the botttom. How do I make sure that LeftArea is always on the left and wuiMainPageName is always on the right, regardles of the browser window and size?missing here. Any ideas?
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
Make sure you don't do your CSS inline:
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;}