css实现右侧固定宽度，左侧宽度自适应

反过来也能够：左侧宽度固定，右侧自适应。无论是左是右，反正就是一边宽度固定，一边宽度自适应。

这种布局比较常见，博客园不少默认主题就是这种。通常状况下，这种布局中宽度固定的区域是侧边栏，而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人不多吧？

要实现这种布局，也算比较简单。咱们先给出html结构：

<div id="wrap">
  <div id="sidebar" style="height:240px;">固定宽度区</div>
  <div id="content" style="height:340px;">自适应区</div>
</div>
<div id="footer">后面的一个DIV，以确保前面的定位不会致使后面的变形</div>

代码中的#wrap的div，是用来包裹咱们要定位的这两个区的；他后面还有个#footer，用来测试在前面的定位搞定后会不会致使后面的div错位——若是错位了，那证实咱们的定位方法必须改进。

下面列举几个常见的方法：

1，固定宽度区浮动，自适应区不设宽度而设置 margin

咱们拿右边定宽左边自适应来作示范,CSS代码以下：

#wrap {
    overflow: hidden; *zoom: 1;
  }
  #content ,#sidebar {
    background-color: #eee; 
  }
  #sidebar {
    float: right; width: 300px;
  }
  #content {
    margin-right: 310px;
  }
  #footer {background-color: #f00;color:#fff; margin-top: 1em}

其中，sidebar让他浮动，并设置了一个宽度；而content没有设置宽度。

你们要注意html中必须使用div标签，不要妄图使用什么p标签来达到目的。由于div有个默认属性，即若是不设置宽度，那他会自动填满他的父标签的宽度。这里的content就是例子。

固然咱们不能让他填满了，填满了他就不能和sidebar保持同一行了。咱们给他设置一个margin。因为sidebar在右边，因此咱们设置content的margin-right值，值比sidebar的宽度大一点点——以便区分他们的范围。例子中是310.

假设content的默认宽度是100%，那么他设置了margin后，他的宽度就变成了100%-310，此时content发现本身的宽度能够与sidebar挤在同一行了，因而他就上来了。

而宽度100%是相对于他的父标签来的，若是咱们改变了他父标签的宽度，那content的宽度也就会变——好比咱们把浏览器窗口缩小，那wrap的宽度就会变小，而content的宽度也就变小——但，他的实际宽度100%-310始终是不会变的。

这个方法看起来很完美，只要咱们记得清除浮动(这里我用了最简单的方法)，那footer也不会错位。并且不管content和sidebar谁更长，都不会对布局形成影响.

但实际上这个方法有个很老火的限制——html中sidebar必须在content以前！

但我须要sidebar在content以后！由于个人content里面才是网页的主要内容，我不想主要内容反而排在次要内容后面。

但若是sidebar在content以后，那上面的一切都会化为泡影。

2，标准浏览器的方法

固然，以不折腾人为标准的w3c标准早就为咱们提供了制做这种自适应宽度的标准方法。那就简单了：把wrap设为display:table并指定宽度100%,而后把content+sidebar设为display:table-cell;而后只给sidebar指定一个宽度，那么content的宽度就变成自适应了。

代码不多，并且不会有额外标签。不过这是IE7都无效的方法。