如何在CSS上将菜单部分与主区域分开

Question

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

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;
}