两列布局、三列布局

单列定宽单列自适应

方法一：margin和绝对定位

<div id="container">
<div class="mainBox">
<p>主要内容区域</p>
<p>已经不再只是一行文字了</p>
<p>要放很多很多东西到这个区域中来</p>
....
<p>不断的重复啊重复着……</p>
</div>
<div class="sideBox">侧边栏
<p>不断的重复啊重复着……</p>
....
<p>不断的重复啊重复着……</p>
</div>
</div>

#container {
position:relative; /* 添加相对定位属性为其子元素的绝对定位属性有参照物 */
margin:10px 0;
} /* 设置页面内容区域设置上下外补丁为10px */
.mainBox {
width:auto; /* 将mainBox的宽度修改为auto默认值 */
margin-right:200px; /* 利用外补丁属性为sideBox留有200px的空白 */
color:#FF0000;
background-color:#333333;
} /* 设置主要内容区域的宽度为auto默认值，背景色以及文本颜色，并居左显示 */
.sideBox {
position:absolute; /* 设置sideBox为绝对定位，相对于其父元素#container定位 */
top:0px; /* 相对其父元素的顶部0px绝对定位 */
right:0px; /* 相对其父元素的右边0px绝对定位 */
width:200px; /* 将sideBox的宽度修改为200px */
margin-left:-200px; /* 添加负边距使sideBox向左浮动缩进 */
color:#FFFFFF;
background-color:#999999;
} /* 设置侧边栏的宽度为200px，背景色以及文本颜色，并居右显示 */

方法二：左边 float，右边 margin-left 

<div id="container">
<div class="sideBox">侧边栏
<p>不断的重复啊重复着……</p>
....
<p>不断的重复啊重复着……</p>
</div>
<div class="mainBox">
<p>主要内容区域</p>
<p>已经不再只是一行文字了</p>
<p>要放很多很多东西到这个区域中来</p>
....
<p>不断的重复啊重复着……</p>
</div>
</div>

#container {
position:relative; /* 添加相对定位属性为其子元素的绝对定位属性有参照物 */
margin:10px 0;
} /* 设置页面内容区域设置上下外补丁为10px */
.sideBox {
float: left;
width:200px; /* 将sideBox的宽度修改为200px */
color:#FFFFFF;
background-color:#999999;
} /* 设置侧边栏的宽度为200px，背景色以及文本颜色，并居右显示 */
.mainBox {
margin-left:200px; /* 利用外补丁属性为sideBox留有200px的空白 */
color:#FF0000;
background-color:#333333;
} /* 设置主要内容区域的宽度为auto默认值，背景色以及文本颜色，并居左显示 */

方法三：负 margin 和 float （两列DOM不同层级）

<div class="container">
<div class="mainBox">
<div class="content">主要内容区域</div>
</div>
<div class="sideBox">侧边栏</div>
</div>

.mainBox {
float:left;
width:100%;
background-color:#FFFFFF;
} /* 设置主要内容区域的外层div标签浮动，并将宽度设置为100% */
.mainBox .content {
margin:0 210px 0 0;
background-color:#000000;
} /* 设置主要内容区域的内层div标签外补丁保持宽度的默认值为auto，留出空白的位置 */
.sideBox {
float:left;
width:200px;
margin-left:-200px;
background-color:#666666;
} /* 将侧边栏设置左浮动，并设置宽度为200px，负边距为左边的-200px */

三列布局

两列定宽中间自适应结构

左侧定宽右侧及中间自适应、三列宽度自适应，原理相同

<div class="container">
<div class="mainBox">
<div class="content">主要内容区域</div>
</div>
<div class="subMainBox">次要内容区域</div>
<div class="sideBox">侧边栏</div>
</div>

.container {
text-align:center;
color:#FFFFFF;
}
.mainBox {
float:left;
width:100%;
background-color:#FFFFFF;
} /* 设置主要内容区域的外层div标签浮动，并将宽度设置为100% */
.mainBox .content {
margin:0 210px 0 310px;   //  将 210px 和 310px 分别修改为 百分数，可以得到左侧定宽右侧及中间自适应、三列宽度自适应布局
background-color:#000000;
} /* 设置主要内容区域的内层div标签外补丁保持宽度的默认值为auto，留出空白的位置给左右两列 */
.subMainBox {
float:left;
width:300px;
margin-left:-100%;
background-color:#666666;
} /* 将次要内容区域设置左浮动，并设置宽度为300px，负边距为左边的-100% */
.sideBox {
float:left;
width:200px;
margin-left:-200px;
background-color:#666666;
} /* 将侧边栏设置左浮动，并设置宽度为200px，负边距为左边的-200px */