两列布局，左边固定，右边自适应的三种方法

    <!-- 方法一：使用CSS3属性calc()进行计算。注意：calc()里的运算符两边必须有空格 -->
    <div>
        <div style="float:left;width:200px;height:500px;background-color:blue;">
            
        </div>
        <div style="float:left;width:calc(100% - 200px);height:500px;background-color:red;">

        </div>
    </div>

    <div style="clear:both;">
        <br>
    </div>

    <!-- 方法二：使用margin负值，使右边容器与左边同一行，并100%宽。再在右边容器中放一个子容器，设置margin-left值为左边容器的宽度。 -->
　　<!-- 使用负margin，浏览器会认为这个元素的大小变小了，所以会改变布局，布局会按照元素的大小减去负margin的大小进行布局；然而实际上却没有变小，所以布局变化后显示的大小还是原大小。详情：http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812 -->

    <div>
        <div style="float:left;width:200px;height:500px;background-color:blue;">
            
        </div>
        <div style="float:left;width:100%;height:500px;-background-color:red;margin-left:-200px;">
            <div style="margin-left:200px;background:yellow;height:500px;">
                
            </div>
        </div>
    </div>

    <div style="clear:both;">
        <br>
    </div>
    
    <!-- 方法二：使用position，右边容器必须设置right -->
    <div style="position:relative;">
        <div style="position:absolute;left:0;width:200px;height:500px;background-color:blue;">
            
        </div>
        <div style="position:absolute;left:200px;right:0px;height:500px;background-color:red;">
            
        </div>
    </div>