现有样式
不能满足人们的需求.
人们需要:
CSS 2 并没有提供原生支持，所以需要将一些属性组合起来，以实现布局
国外一般不这么叫. <div> 是一个无语义的标签，适合用来做与内容无关的事情.
只能用 <div> 吗？
优化:
省标签，便于控制局部 范例
给通栏加背景色 范例
IE 6 不支持 inline-block :
范例
一列固定宽度，另外一列自适应宽度
浮动元素 + 普通元素margin 范例
如果侧边栏在右边:
注意: 考虑到浏览器的渲染顺序,
aside和main顺序不可更改.
两侧两列固定宽度，中间列自适应宽度
范例
兄弟,div实现不了100%高度,最多只能自适应高度.你还是在iframe上定高度吧=============================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>左右分栏</title>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<meta content="MSHTML 6.00.2900.2180" name="GENERATOR">
<script language="JavaScript">
//左右
function switchSysBarl(){
var imgsrc
imgsrc=document.all("makeleft").src
document.all("makeleft").src="img/menu_open.gif"
document.all("makeleft").title="显示左边的菜单"
parent.document.all("bbs_left").style.display="none"
}
else{
document.all("makeleft").src="img/menu_close.gif"
document.all("makeleft").title="隐藏左边的菜单"
parent.document.all("bbs_left").style.display=""
}
}
</script>
<link rel="shortcut icon" href="favicon.ico">
</head>
<body bottommargin="0" leftmargin="0" topmargin="0" scroll="no" rightmargin="0">
<div style="z-index: 2visibility: inheritwidth: autoheight: autofloat: left"
frameborder="0" scrolling="no" target="main">
<iframe name="bbs_left" style="z-index: 2visibility: inheritwidth: 180pxheight: 100%"
src="left.htm" frameborder="0" scrolling="no" target="main"></iframe>
</div>
<div style="background-color: #005fbdwidth: 10pxfloat: leftheight: 800pxcursor: hand
padding: 300px 0px 0px 0px" id="menuSwitch" onclick="switchSysBarl()">
<img src="img/menu_close.gif" name="makeleft" width="10" height="10" border="0" id="makeleft" /></div>
<div style="float: leftwidth: auto">
<iframe name="bbs_main" style="z-index: 1visibility: inheritwidth: 100%height: 100%" src="right.htm"
frameborder="0" scrolling="yes"></iframe>
</div>
</body>
</html>
橘色部分使用绝对定位，比如侧边栏宽度为200px,橘色部分的绝对定位就写left:200pxright:0
收缩后减少left的值，比如left：20px
