<style type="text/css">
    #top{
        height: 100px;
        background-color: gray;
    }
    #main{

    }
    .lside{
<!-- 應(yīng)該養(yǎng)成先確認(rèn)高再確認(rèn)寬的習(xí)慣 -->
        width: 400px;
        height: 600px;
        background-color: green;
        float: left;
    }
    .rside{
        width: 300px;
        height: 600px;
        background-color: blue;
        float: left;
        margin-left: 20px;
    }
    #footer{
        width: 700px;
        height: 100px;
        background-color: red;
    }
   .clear{
        clear: both;
        width: 0px;
        height: 0px;
        overflow: hidden;      <!-- 解決老版瀏覽器的顯示問題，具體見 http://www.itdecent.cn/p/6a5ea296b5e5 -->

    }

</style>

<div id="container">
    <div id="top"></div>
    <div id="main">
        <div class="lside"></div>
        <div class="rside"></div>
        <!-- 讓footer能正常顯示在浮動的rside下端，不要給main設(shè)置高，也不要讓main或footer浮動，應(yīng)該在此處加個clear -->
        <div class="clear"></div> 
    </div>
    <div id="footer"></div>
</div>

效果圖：