2.float浮动布局，absolute绝对定位，flex弹性盒子，table表格布局，grid网格布局 / 栅格化布局
3.移动端布局：流式布局(百分比布局)JD,flex弹性布局(强烈推荐)携程,less+rem+媒体查询布局 苏宁,
css设计模式
OOCSS——Object Oriented CSS
SMACSS——Scalable and Modular Architecture for CSS
垂直水平均分：
子元素纵向等距排列：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
IE盒子模型width=width(margin+padding) 解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
<style>*{ padding:0margin:0}
body{ position:relativewidth:100%height:100%min-height:600pxmin-width:800pxoverflow:hidden}
#header{ height:100pxposition:absolutetop:0width:100%padding-bottom:5pxbackground: #F36}
#middle{ height:100%width:100%bottom:0background:#eee}
#left{ position:absoluteleft:0top:105pxheight:100%width:220pxbackground:#9C3overflow-y:autooverflow-x:hidden}
#right{ margin-left:220pxpadding-top:105pxbackground: #63Foverflow-y:autooverflow-x:overheight:100%}
</style>
<div id="header">
<table width="100%" border="0">
<tr>
<td rowspan="2" align="center" width="85"><img src="jiaoben2613/images/logo.png" width="85" height="85" /></td>
<td>西南民族大学继续教育学院综合管理系统</td>
<td>欢迎系统管理员登录</td>
</tr>
<tr>
<td colspan="2">
<div><a href="#">新闻中心</a><a href="#">新闻中心</a><a href="#">新闻中心</a><a href="#">新闻中心</a><a href="#">新闻中心</a><a href="#">新闻中心</a></div>
</td>
</tr>
</table>
</div>
<div id="middle">
<div id="left"><p>左边</p><div style=" width:100pxheight:1000pxborder:1px #000 solid"></div></div>
<div id="right"><p>右边</p><div style=" width:100pxheight:1000pxborder:1px #000 solid"></div></div>
</div>
试试这样可以不？或者 你就用表格好了！
问题出在position: absolute这个定位属性上.并且你想要同时固定三栏，用position属性是非常不明智的。既然你使用了浮动属性，你可以考虑下面的布局。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
body, div {padding:0margin:0}
.clear {clear:both}
.warp {width:1000px}
.warp #header {
height: 60px
background: #DDDDDD
padding: 0 10px 0 20px
}
.warp #header h1 {
margin: 0
padding: 10px 0}
.warp #sidebar1 {
border:1px solid #000
width: 150px
background: #EBEBEB
padding: 15px 10px 15px 20px}
.warp #sidebar2 {
border:1px solid #000
width: 160px
background: #EBEBEB/* 将显示背景色，其宽度等于栏中内容的长度，*/
padding: 15px 10px 15px 20px/* 填充使 div 的内容与边缘保持一定的距离 */
}
.warp #mainContent {
margin: 0 10px/* 此 div 元素的左边距和右边距会在页面两侧上创建两个外部栏。无论侧栏 div 中包含多少内容，栏内的空间都将保留。 */
padding: 0 10px/* 请记住，填充是 div 方块内部的空间，边距则是 div 方块外部的空间 */
border:1px solid #000
}
.warp #footer {
padding: 0 10px 0 20px/* 此填充会将它上面 div 中的所有元素左对齐。 */
background:#DDDDDD
}
.warp #footer p {
margin: 0/* 将脚注中第一个元素的边距设置为零将避免出现可能的边距重叠（即 div 之间出现的空白）*/
padding: 10px 0/* 就像边距会产生空白一样，此元素上的填充也将产生空白，但不会出现边距重叠问题 */
}
.fltrt { /* 此类可用来使页面中的元素向右浮动。浮动元素必须位于页面上要与之相邻的元素之前。 */
float: right
}
.fltlft { /* 此类可用来使页面上的元素向左浮动 */
float: left
}
</style>
</head>
<body>
<div class="warp">
<div id="header">
<h1>标题</h1>
<!-- end #header --></div>
<div id="container">
<div id="sidebar1" class="fltlft">
<h3>Sidebar1 内容</h3>
<!-- end #sidebar1 --></div>
<div id="sidebar2" class="fltrt">
<h3>Sidebar2 内容</h3>
<!-- end #sidebar2 --></div>
<div id="mainContent" class="fltlft">
<h1>主要内容 </h1>
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
<!-- end #mainContent --></div>
<br class="clear" />
<!-- end #container --></div>
<div id="footer">
<p>脚注</p>
<!-- end #footer --></div>
</div>
</body>
</html>
