两栏布局，右侧自适应

总结了一下两栏布局，右侧自适应的方法，欢迎指点和补充~~

方法一：要求right中的子元素不能有固定宽度的（为了IE6），right要加overflow:hidden;
           如果right中的内容有固定宽度的浮动元素时，right要加overflow:hidden;，否则当浏览器缩小到right宽度小于里面子元素的宽度时，在非IE67的浏览器中right里的子元素会下移，IE7正常显示；
           不论加不加overflow，在IE6中，当浏览器缩小到right宽度小于里面子元素的宽度时，right都会下移。

<style type="text/css">
.box01{
    padding:10px 0;
    background:#F2F2F2;
}
.box01 div{
    height:200px;
}
.box01 .left{
    width:200px;
    float:left;           /***/
    background:#0FF;
}
.box01 .right{
    background:#396;
    overflow:hidden;    /*不加overflow:hidden时，right里面的内容有固定宽度的，当浏览器缩小时，里面的内容会下移*/
}
</style>

<div class="box01">
   <div class="left">左侧固定宽度</div>
   <div class="right">
      <p style="width:800px;background:#F00;">有固定宽度的非浮动元素</p>
      右侧自适应
      <p style="width:800px;background:#F00;float:left;">有固定宽度的浮动元素</p>
   </div>
</div>

方法二：要求right中的子元素不能有固定宽度的（为了IE6），right要加overflow:hidden;

<style type="text/css">
.box02{
    padding:10px 0;
    background:#F2F2F2;
}
.box02 div{
    height:200px;
}
.box02 .left{
    width:200px;
    float:left;          /***/
    background:#0FF;
}
.box02 .right{
    margin-left:200px;   /***/
    background:#396;
    overflow:hidden;     /***/
}
</style>

<div class="box02">
   <div class="left">左侧固定宽度</div>
   <div class="right">
      <p style="width:800px;background:#F00;">有固定宽度的非浮动元素</p>
      右侧自适应
      <p style="width:800px;background:#F00;float:left;">有固定宽度的浮动元素</p>
   </div>
</div>

方法三：要求right中的子元素不能有固定宽度的（为了IE6），right要加overflow:hidden;

<style type="text/css">
.box03{
    padding:10px 0;
    background:#F2F2F2;
    margin-left:200px;     /***/
    position:relative;
}
.box03 div{
    height:200px;
}
.box03 .left{
    width:200px;
    float:left;           /***/
    margin-left:-200px;    /***/
    background:#0FF;
}
.box03 .right{
    width:100%;
    background:#396;
    overflow:hidden;     /***/
}
</style>

<div class="box03">
   <div class="left">左侧固定宽度</div>
   <div class="right">
      <p style="width:800px;background:#F00;">有固定宽度的非浮动元素</p>
      右侧自适应
      <p style="width:800px;background:#F00;float:left;">有固定宽度的浮动元素</p>
   </div>
</div>

方法四：right要加overflow:hidden;

<style type="text/css">
.box04{
    padding:10px 0;
    background:#F2F2F2;
    position:relative;      /***/
}
.box04 div{
    height:200px;
}
.box04 .left{
    width:200px;
    background:#0FF;
    position:absolute;     /***/
    top:10px;
    left:0;
}
.box04 .right{
    background:#396;
    margin-left:200px;    /***/
    overflow:hidden;
}
</style>

<div class="box04">
   <div class="left">左侧固定宽度</div>
   <div class="right">
      <p style="width:800px;background:#F00;">有固定宽度的非浮动元素</p>
      右侧自适应
      <p style="width:800px;background:#F00;float:left;">有固定宽度的浮动元素</p>
   </div>
</div>

方法五：淘宝的做法，不支持IE6

<style type="text/css">
.box05{
    padding:10px 0;
    background:#F2F2F2;
}
.box05 div{
    height:200px;
}

.box05 .left{
    width:200px;
    background:#0FF;
    float: left;            /***/
    margin-left: -100%;     /***/
}
.box05 .right_box{
    width:100%;
    float:left;            /***/
}
.box05 .right{
    background:#396;
    margin-left:200px;      /***/
    overflow:hidden;        /***/
}
</style>

<div class="box05 clear">
   <div class="right_box">
       <div class="right">
          <p style="width:800px;background:#F00;">有固定宽度的非浮动元素</p>
          右侧自适应
          <p style="width:800px;background:#F00;float:left;">有固定宽度的浮动元素</p>
       </div>
   </div>
   <div class="left">左侧固定宽度</div>
</div>

效果很丑，请看图片