首先要使内容的整体宽度随着浏览器窗口的变化而变化，因此中间的container容器中的左右两列的总宽度也会发生变化。
出现的两种方式
两列按照一定的比例同时变化，还是一列固定，另一列变化。
命名方法：固定宽度记为f 即fixed 变宽度记为l 即liquid
如果1-2-1不居中的两列，左边的为固定宽度，右边的边宽度，可以记为1-（f-l）-1
1.1-2-1等比例变宽布局
#header,#pagefooter,#container{
margin:0 auto;
width:85%;改为比例宽度
}
#content{
float:left;
width:66%;
}
#side{
float:left;
width:33%;
}
content和side的宽度设置为99%，而不是100%避免宽度大于他们容器的总宽度，而使某个div被挤到下一行中。
如果希望精确，可以写成99.9%
要对最大的宽度进行限制。
#header,#pagefooter,#container{
margin:0 auto;
width:85%;
min-width:500px;
max-width:800px;
}
1-2-1单列变宽布局
当有一侧为目录时，而不希望他的宽度发生变化。
浮动方法
实现原理 在content未免在套一个div，使它的宽度为100%，和container的宽度相同，然后通过将左侧的margin设置为负的300像素，就使它向左平移了300像素，再将content的左侧margin设置为正的300像素，就实现了100%-300px这个无法表达的宽度
代码如下：
#header,#container,#pagefooter{
margin:0 auto;
width:85%;
}
#contentwrap{
margin-left:-300px;
float:left;
width:100%;
}
#content{
margin-left:300px;
}
#side{
float:right;
width:300px;
}
#pagefooter{
clear:both;
}
核心的一点是活动宽度列外面套了一层div 设置为contentwrap
contentwrap的宽度设置为100%宽度，同时将右侧的margin设置为-300px；在content
的里面，以标准流的方式存在。即实现了100%-300px的宽度。
如图所示
html结构代码
<body>
<div id="header">
<div class="rounded">...这里省略固定结构的代码
圆角框</div>
</div>
<div id="container">
<div id="contentwrap">
<div id="content">
<div class="rounded">...这里省略固定结构的代码 圆角框</div>
</div>
</div>//contentwrap结束
<div id="side">
<div class="rounded">...这里省略固定结构的代码 圆角框</div>
</div>//side结束
</div>//container结束
<div id="pagefooter">
<div class="rounded">...这里省略固定结构的代码
圆角框</div>
</div>
</div>
</body>
1-3-1宽度适应布局
1三列按比例适应宽度；不作介绍
2一列固定，其他两列按照比例适应宽度；
3两列固定，其他一列适应宽度；
2一列固定的情况
outerwrap宽度和container宽度相同，里面的inner以标准刘的方式存在，宽度会自然伸展，由于左侧margin负200，所以宽度就是总卡U年度减去200像素，这样innerwrap里面的navi和content就会以这个新宽度为宽度基准。
#header,#pagefooter,#container{
margin:0 auto;
width:85%;
}
#outerwrap{
float:left;
width:100%;
margin-left:-200px;
}
#innerwrap{
margin-left:200px;
}
#navi{
float:left;
width:40%;
}
#content{
float:right;
width:59.5%;
}
#side{
float:right;
width:200px;
}
#pagefooter{
clear:both;
}
html结构代码省略
1-3-1中间列宽度固定的变宽布局
中间固定列，左右按照比例适应总宽度。常见的两侧的列固定宽度，中间列变化宽度
如图所示
左侧的naviwrap设置为50%的宽度，向左浮动，并通过将左侧margin设置为-150像素，向左平移了150像素。然后再里面的navi中左侧margin设置为150像素，补偿回来这150像素。
接着将content设置为固定宽度，先做浮动，这样就紧贴着navi的边界
最后将sidewrap做与navi部分相似的处理，设置为50%宽度，向左浮动，这是本来宽度已经超过100%，会被挤到下一行，但是将右侧margin设置为-150像素后你就不会超过总宽度了。
实际代码中将其中一个设置为49.9% 一个设置为50%；
css代码如下
#header,#pagefooter,#congtainer{
width:85%;
margin:0 auto;
}
#naviwrap{
width:50%;
float:left;
margin-left:150px;
}
分列布局背景颜色问题
#navi{
marin-left:150px;
}
#content{
float:left;
width:300px;
}
#sidewrap{
width:49.9%;
float:right;
margin-left:-150px;
}
#side{
margin-right:150px;
}
#pagefooter{
clear:both;
}
1-3-1双侧列宽度固定的变宽布局
常用的布局方式
#header,#pagefooter,#congtainer
{
width:85%;
margin:0 auto;
}
#side{
width:200px;
float:right;
}
#outerwrap{
width:100%;
margin-left:-200px;
float:left;
}
#innerwrap{
margin-left:200px;
}
#navi{
width:150px;
float:left;
}
#contentwrap{
float:right;
width:100%;
margin-right:-150px;
}
#content{
margin-right:150px;
}
#pagefooter{
clear:both;
}
1-3-1中列和侧列宽度固定的变宽布局
#header,#container,#pagefooter{
margin:0 auto;
width:85%;
}
#navi
{
float：left;
width:150px;
}
#content{
float:left;
width:250px;
}
#sidewrap{
float:right;
margin-right:-400px;
width:100%;
}
#side{
margin-right:400px;
}
#pagefooter{
clear:both;
}
边宽度布局方法总结