HTML将节拆分为两列

我正试图把这一页分成两部分。左侧和右侧的一个区域将是内容页。我有下面的html，但看起来它不工作。有什么想法吗，我做得不对吗

<div id="wuiMainArea">
    <div id="wuiMainContent">

      <div id="wuiLeftArea">
        <div id="wuiLefthandNavRoot">
            <h2 class="wui-hidden">Section Navigation</h2>
            <h3 class="wui-navigation-title"><p>Applications</p><p>&nbsp;</p></h3>
            <div id="tree" style="float: left; width: auto; background-color: #f2f4f5;"> </div>
        </div>
        </div>

      <div id="wuiInpageNav">
            <div class="wui-inpage-container" id="in_100">
              <p>This is the div I will be using for charts </p>
            </div>
      </div>

      </div>
 </div>

区段导航
应用程序

这是我将用于图表的div

像这样

<div id="wuiMainArea" style="border: 1px solid;">
    <div id="wuiMainContent" style="border: 1px solid;">

        <div id="wuiLeftArea" style="border: 1px solid;float: left;">
            <div id="wuiLefthandNavRoot">
                <h2 class="wui-hidden">Section Navigation</h2>
                <h3 class="wui-navigation-title"><p>Applications</p><p>&nbsp;</p></h3>
                <div id="tree" style="float: left; width: auto; background-color: #f2f4f5;"> </div>
            </div>
        </div>

        <div id="wuiInpageNav" style="border: 1px solid; float: left;">
            <div class="wui-inpage-container" id="in_100">
                <p>This is the div I will be using for charts </p>
            </div>
        </div>
        <div style="clear: both;"></div>
    </div>
</div>

区段导航
应用程序

这是我将用于图表的div

最好使用CSS样式化HTML。

---

定义宽度以满足您的需要。我还建议在将相同样式应用于多个元素时使用类而不是ID

嗨，温斯顿，我这样做了，但我在第二个div中没有看到这段文字：这是我将用于图表的div

@user1471980为什么你看不到？听着，或者我不太明白你的意思？这可能取决于你的css

 #wuiMainArea, #wuiMainContent{
    margin: 0 auto;
    width: 960px;
}

 #wuiLeftArea, #wuiInpageNav{
/* use half of the main content div's width */
/* -2 because of 1px-border on both sides */
    width: 478px; 
    display: inline-block;
    float: left;
}