两列宽度自适应

左边宽度固定，右边宽度自适应问题：

html:

1 <div class="wrap clearfix">
2          <div class="left">左边宽度固定的内容</div>
3          <div class="right">右边宽度自适应的内容</div>
4 </div>

css:

1 .wrap{margin-left:200px;}
2 .clearfix:after{visibility:hidden; clear:both; height:0; content:""; font-size:0; overflow:hidden; display:block;}
3 .left,.right{float:left; display:inline;}
4 .left{width:200px; margin-left:-200px; background-color:red;       position:relative;}
5 .right{width:100%; background-color:blue;}

效果图如下：

原理如下：

1.最外面的容器利用margin-left来为左边已经确定宽度的left容器腾出left容器所需要到宽度

2.总所周之，div为块级元素，所以若想left和right在同一行显示，需要给两个容器同时设置float:left;为了兼容ie6，加上display:inline;的属性

3.left包含在wrap容器里，上面通过给wrap设置margin-left属性使得左边留有left的200px宽度距离，所以需要给left设置margin-left负值

重点叙述完毕，改天写其它问题。