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

    }
    .lside{
<!-- 应该养成先确认高再确认宽的习惯 -->
        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;      <!-- 解决老版浏览器的显示问题，具体见 //www.greatytc.com/p/6a5ea296b5e5 -->

    }

</style>

<div id="container">
    <div id="top"></div>
    <div id="main">
        <div class="lside"></div>
        <div class="rside"></div>
        <!-- 让footer能正常显示在浮动的rside下端，不要给main设置高，也不要让main或footer浮动，应该在此处加个clear -->
        <div class="clear"></div> 
    </div>
    <div id="footer"></div>
</div>

效果图：