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

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

浮动+margin负值

Html markup

     
            
      
                       Header            
      
            
      
                
       
                            Content                
       
            
      
            
      
                       Navigation            
      
            
      
                       Extra stuff            
      
            
      
                       Footer            
      
        
     

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负值 和布局技巧