两栏布局

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

搜集了常用的布局方式,一直在收藏夹. 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负值 和布局技巧