标签：
<div id="wrap"> <div id="sidebar" style="height:240px;">固定宽度区</div> <div id="content" style="height:340px;">自适应区</div> </div> <div id="footer">后面的一个DIV，以确保前面的定位不会导致后面的变形</div>
方法1
#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：
<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：
<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都无效的方法。
标签：
原文地址：http://www.cnblogs.com/camille666/p/css_leftauto_rightfixed.html
