变宽度布局
1-2-1 等比例变宽
总宽度设置 width: 85%; min-width: 650px; （关于IE6的min-width支持，可用）
content 设置 width: 66%; float: left;
side 设置 width: 33%; float: right;
加入clear 空div
HTML 结构：
CSS：1-2-1 等比例变宽 Content header
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本Side header
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
body{ font: 13px/1.5 Arial; margin: 0; padding: 0; } #header, #container, #footer{ width: 85%; margin: 10px auto; min-width: 650px; } #header{ border: 1px solid black; background-color: #666; } #content{ border: 1px solid black; background-color: #999; width: 66%; float: left; } #side{ border: 1px solid black; background-color: #999; width: 33%; float: right; } #clear{ clear: both; } #footer{ border: 1px solid black; background-color: #CCC; } 1-2-1 单列变宽
side 固定宽度，content 随窗口宽度变化
side设置 width: 200px; float: left;
在content外层加入 contentWrap，contentWrap 设置为 width: 100%; margin-right: -220px; float: right;
而content 设置为 margin-right: 220px;
这样就利用了wrap实现了content的宽度为 100%-320px
HTML 结构：
1-2-1 单列变宽 header
立即学习“前端免费学习笔记（深入）”；
Content header
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本Side header
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
CSS：
body{ font: 13px/1.5 Arial; margin: 0; padding: 0; } #header, #container, #footer{ width: 85%; margin: 10px auto; min-width: 700px; } #header{ border: 1px solid black; background-color: #666; } #contentWrap{ width: 100%; margin-right: -220px; float: right; } #content{ border: 1px solid black; background-color: #999; margin-right: 220px; } #side{ border: 1px solid black; background-color: #999; width: 200px; float: left; } #clear{ clear: both; } #footer{ border: 1px solid black; background-color: #CCC; } 1-3-1 单侧列宽固定
nav 固定宽度 width: 200px; float: left;
在content 和 side 外层加入两层 div：outerWrap 和 innerWrap
outerWrap 设置为 width: 100%; margin-right: -210px; float: right;
innerWrap 设置为 margin-right: 210px;
然后content 和 side 相当于在 innerWrap 内部等比例变宽
HTML结构：
1-3-1 单侧列宽固定 header
立即学习“前端免费学习笔记（深入）”；
Content header
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本Side header
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
CSS：
body{ font: 13px/1.5 Arial; margin: 0; padding: 0; } #header, #container, #footer{ width: 85%; margin: 10px auto; min-width: 800px; } #header{ border: 1px solid black; background-color: #666; } #nav{ border: 1px solid black; background-color: #999; width: 200px; float: left; } #outerWrap{ width: 100%; margin-right: -210px; float: right; } #innerWrap{ margin-right: 210px; } #content{ border: 1px solid black; background-color: #999; width: 66%; float: left; } #side{ border: 1px solid black; background-color: #999; width: 33%; float: right; } #clear{ clear: both; } #footer{ border: 1px solid black; background-color: #CCC; } 1-3-1 中间列宽固定
content 宽度固定
在 nav 和 side 分别加上外层 div ：navWrap 和 sideWrap
navWrap 设置为 width: 50%; margin-left: -210px; float: left;
nav 设置为 margin-left: 210px;
同理，sideWrap 和 side 也做类似的设置
HTML结构：
1-3-1 中间列宽固定 header
立即学习“前端免费学习笔记（深入）”；
Content header
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本Side header
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
CSS：
body{ font: 13px/1.5 Arial; margin: 0; padding: 0; } #header, #container, #footer{ width: 85%; margin: 10px auto; min-width: 700px; } #header{ border: 1px solid black; background-color: #666; } #navWrap{ width: 50%; margin-left: -210px; float: left; } #nav{ border: 1px solid black; background-color: #999; margin-left: 210px; } #content{ border: 1px solid black; background-color: #999; width: 400px; float: left; margin-left: 10px; } #sideWrap{ width: 49.9%; margin-right: -210px; float: right; } #side{ border: 1px solid black; background-color: #999; margin-right: 210px; } #clear{ clear: both; } #footer{ border: 1px solid black; background-color: #CCC; } 1-3-1 双侧列宽固定
nav 和 side 宽度固定
nav 设置为 width: 200px; float: left;
在 content 和 side 外层加上 outerWrap 和 innerWrap ，这样就相当于单列固定宽度的设置，nav 固定宽度
然后再在 content 外层加上 contentWrap ，也相当于在 innerWrap 内部单列固定宽度设置，side 固定宽度
HTML 结构：
1-3-1 双侧列宽固定 header
立即学习“前端免费学习笔记（深入）”；
Content header
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本Side header
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
CSS：
body{ font: 13px/1.5 Arial; margin: 0; padding: 0; } #header, #container, #footer{ width: 85%; margin: 10px auto; min-width: 800px; } #header{ border: 1px solid black; background-color: #666; } #nav{ border: 1px solid black; background-color: #999; width: 200px; float: left; } #outerWrap{ width: 100%; margin-right: -210px; float: right; } #innerWrap{ margin-right: 210px; } #contentWrap{ width: 100%; margin-left: -110px; float: left; } #content{ border: 1px solid black; background-color: #999; margin-left: 110px; } #side{ border: 1px solid black; background-color: #999; width: 100px; float: right; } #clear{ clear: both; } #footer{ border: 1px solid black; background-color: #CCC; } 1-3-1 中列和侧列宽固定
nav 和 content 固定宽度，side 外层加上 sideWrap ，相当于1-2-1单列变宽
HTML 结构：
1-3-1 中列和侧列宽固定 header
立即学习“前端免费学习笔记（深入）”；
Content header
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本Side header
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
CSS：
body{ font: 13px/1.5 Arial; margin: 0; padding: 0; } #header, #container, #footer{ width: 85%; margin: 10px auto; min-width: 800px; } #header{ border: 1px solid black; background-color: #666; } #nav{ border: 1px solid black; background-color: #999; width: 200px; float: left; } #content{ border: 1px solid black; background-color: #999; margin-left: 10px; width: 400px; float: left; } #sideWrap{ width: 100%; margin-right: -620px; float: right; } #side{ border: 1px solid black; background-color: #999; margin-right: 620px; } #clear{ clear: both; } #footer{ border: 1px solid black; background-color: #CCC; }
