两边固定中间子适应的流式布局

两边固定中间自适应的布局

Html：

<div id="main">
    <div id="left">
    </div>
    <div id="right">
    </div>
    <div id="mid">
    </div>
</div>

　　

CSS：

<style type="text/css">
    body
    {
        margin: 0px;
    }
        
    #main
    {
        background-color: #006699; 
        height: 500px;
    }
        
    /* 左列，默认的宽度是200 Pixel */
    #left
    {
        float: left;
        width: 200px;
        height: 300px;
        background-color: #33CC33;
        z-index: 3;
    }
        
    /* 右列，默认的宽度是200 Pixel */
    #right
    {
        float: right;
        width: 200px;
        height: 300px;
        background-color: #999999;
        z-index: 5;
    }
        
    /* 居中自适应 */
    #mid
    {
        width: auto;
        height: 300px;
        margin: 0 210px;
        background-color: #999900;
        z-index: 1;
    }
</style>

整体效果：