两列布局-左侧定宽|右侧自适应

CSS两列布局：左侧固定宽度，右侧宽度自适应

在实际的应用中，只有单列宽度变化，而其它保持固定的布局可能会更加实用。一般在存在多个列的页面中，通常比较宽的一个列是用来放置内容的，而窄列放置链接、导航等内容，这些内容一般宽度是固定的，不需要扩大。因此如果能把内容列设置为可以变化，而其他列固定，会是一个很好的方式。

效果图：

方法：

左侧粉色div宽度固定为300px，左浮动；

右侧棕色div外面再套一层div，把外层div设置成宽度为100%的浮动块，并设margin-right设为-300px，这样一来，外层div就向右移了300px，正好给左侧div腾出空来；

最后把内层div的margin-right设为300px，就正好充满了右侧的可见区域，即图中的棕色区块。

HTML代码：

<div>
    <div class="side"></div>
    <div class="content-out">
        <div class="content"></div>
    </div>
</div>

CSS代码：

.side {
    width: 300px;
    height: 300px;
    background-color: #ffb5b5;
    float: left;
}
.content {
    height: 300px;
    background-color: #d6d6ad;
    margin-right: 300px;
}
.content-out {
    float: left;
    width: 100%;
    margin-right: -300px;
}