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

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

方法1

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

#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}

这个方法看起来很完美，只要我们记得清除浮动(这里我用了最简单的方法)，那footer也不会错位。而且无论content和sidebar谁更长，都不会对布局造成影响.但实际上这个方法有个很老火的限制——html中sidebar必须在content之前！

方法2：

固定宽度区使用绝对定位，自适应区照例设置margin

<div id="wrap">
  <div id="content" style="height:340px;">自适应区，在前面</div>
  <div id="sidebar" style="height:240px;">固定宽度区</div>
</div>

#wrap {
    *zoom: 1; position: relative;
  }
  #sidebar {
    width: 300px; position: absolute; right: 0; top: 0;
  }
  #content {
    margin-right: 310px;
  }

footer怎么还是在那儿呢？怎么没有自动往下走呢？footer说——我不给绝对主义者让位！

其实这与footer无关，而是因为wrap对sidebar的无视造成的——你再长，我还是没感觉。

看来这种定位方式只能满足sidebar自己，但对他的兄弟们却毫无益处。

方法3：

float与margin齐上阵

<div id="wrap">
  <div id="content" style="height:140px;">
    <div id="contentb">
      content自适应区，在前面
    </div>
  </div>
  <div id="sidebar" style="height:240px;">sidebar固定宽度区</div>
</div>

#sidebar {
    width: 300px; float: right;
  }
  #content {
    margin-left: -310px; float: left; width: 100%;
  }
  #contentb {
    margin-left: 310px;
  }

多了一层div

方法4：

标准浏览器的方法

把wrap设为display:table并指定宽度100%,然后把content+sidebar设为display:table-cell;然后只给sidebar指定一个宽度，那么content的宽度就变成自适应了。代码很少，而且不会有额外标签。不过这是IE7都无效的方法。