两栏布局

比较常见的布局方式：一栏定宽，另一栏自适应

搜集了常用的布局方式,一直在收藏夹. layout Gallery

浮动+margin负值

Html markup

        <div id="container">

            <div id="header">

                Header

            </div>

            <div id="wrapper">

                <div id="content">

                    Content

                </div>

            </div>

            <div id="navigation">

                Navigation

            </div>

            <div id="extra">

                Extra stuff

            </div>

            <div id="footer">

                Footer

            </div>

        </div>

css 

            * {

                margin: 0;

                padding: 0;

            }

            #wrapper {

                width:100%;

                float:right;

                margin-left:-200px;

            }

            #content {

                margin-left:200px;

            }

            

            #navigation {

                float:left;

                width:200px;

            }

            #extra {

                clear:left;

                float:left;

                width:200px;

            }

            #footer {

                clear: both;

                width:100%;

            }

 

            * {

                margin: 0;

                padding: 0;

            }

            #wrapper {

                width:100%;

                float:right;/* difference*/

            }

            #content {

                margin-left:200px;

            }

            

            #navigation {

                float:left;

                width:200px;

                margin-right:-200px; /* difference*/

            }

            #extra {

                clear:left;

                float:left;

                width:200px;

            }

            #footer {

                clear: both;

                width:100%;

            }

 //TODO 改天好好研究下margin负值 和布局技巧