css常见两列布局方案及演示例子

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

    #header{ width: 980px; height: 90px; margin: 0 auto; background: #f60;}
    #container{ width: 980px; height: 500px; margin: 0 auto;}
    #aside{ float: left; width: 240px; height: 500px; background: #ccc;}
    #main{ float: left; width: 740px; height: 500px; 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="main">
    <div class="inner">main</div>
    </div>
    <div id="aside">
    <div class="inner">aside</div>
    </div>
    </div>
    <div id="footer">footer</div>
    </div>

    #header{ width: 980px; height: 90px; margin: 0 auto; background: #f60;}
    #container{ width: 980px; height: 500px; margin: 0 auto;}
    #main{ float: left; width: 740px; height: 500px; background: orange;}
    #aside{ float:left; width: 240px; height: 500px; background: #ccc;}
    #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="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>
    <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;}
    #main{ margin-left: 240px; background: orange; }
    #footer{ width: 96%; height: 90px; margin: 0 auto; background: #08f;}

    <div id="wrapper">
    <div id="header">header</div>
    <div id="container" 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="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>
    <div id="footer">footer</div>
    </div>

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