如何将我的菜单部分从CSS的主区域中分离出来

Question

我必须创建一个web布局，其中标题是顶部的水平部分，下面是一个垂直菜单框，旁边是一个主区域框，里面有内容框和页脚框。我的问题是，我似乎无法将菜单框和主区域框分开。菜单栏与主区域重叠。有什么代码可以解决这个问题吗？

Answer 1

你的意思是这样的吗：http://jsfiddle.net/byxwr1he/2/

HTML:

<div id="header">
    header
</div>
<div id="mainContainer">
    <div id="sidePanel">
        side panel
    </div>
    <div id="main">
        main content
        <div id="footer">
            footer
        </div>
    </div>
</div>

CSS：

div {
    border: 2px solid blue;
}
#mainContainer {
    height: 500px;
    position: relative;
}
#sidePanel {
    float: left;
    top: 0;
    bottom: 0;
    width: 150px;
    position: absolute;
}
#main {
    float: left;
    top: 0;
    bottom: 0;
    left: 150px;
    right: 0;
    position: absolute;
}
#footer {
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    position: absolute;
}