css常见三列布局演示实例

<div id="wrapper">
    <div id="header">header</div>
    <div id="container" class="cls">
    <div id="aside">
    <div class="inner">
    aside
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    </div>
    <div id="content" class="cls">
    <div id="main">
    <div class="inner">
    main
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    </div>
    <div id="content-aside">
    <div class="inner">
    content-aside
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    </div> 
    </div>
    </div>
    <div id="footer">footer</div>
    </div>

    #header{ width: 980px; height: 90px; margin: 0 auto; background: #f60;}
    #container{ width: 980px; margin: 0 auto;}
    #aside{ float: left; width: 240px; background: #ccc;}
    #content{ margin-left: 240px;}
    #main{ float: left; width: 540px; background: pink;}
    #content-aside{ float: left; width: 200px; background: orange; }
    #footer{ width: 980px; height: 90px; margin: 0 auto; background: #08f;}

<div id="wrapper">
    <div id="header">header</div>
    <div id="container" class="cls">
    <div id="aside">
    <div class="inner">
    aside
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    </div>
    <div id="content" class="cls">
    <div id="main">
    <div class="inner">
    main
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    </div>
    <div id="content-aside">
    <div class="inner">
    content-aside
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    </div> 
    </div>
    </div>
    <div id="footer">footer</div>
    </div>

    #header{ width: 96%; height: 90px; margin: 0 auto; background: #f60;}
    #container{ width: 96%; margin: 0 auto;}
    #aside{ float: left; width: 240px; background: #ccc;}
    #content{ margin-left: 240px;}
    #main{ float: left; width: 100%; background: pink;}
    #main .inner{ padding-right: 200px;}
    #content-aside{ float: left; width: 200px; margin-left: -200px; background: orange; }
    #footer{ width: 96%; height: 90px; margin: 0 auto; background: #08f;}