《写给大家看的CSS书》第五章：网站布局

/* 两栏固定布局 */
 
body {
    text-align:center; /*通过这条规则使布局在IE6的浏览器窗口中居中*/
}
 
#main_wrapper {
    width:840px;  /*当这个宽度改变时，分栏的宽度也会成比例改变*/
    margin-left:auto;  /*在浏览器中居中布局*/
    margin-right:auto; 
    text-align:left; /*重置body标签为IE6设置的hack */
}
#header {
     
    }
#nav {
    width:22%; /*导航宽度加上内容宽度的和刚好为100% */
    float:left; /* 浮动，使导航和内容并排显示*/
    }
#content {
    float:left;/* 浮动，使导航和内容并排显示*/
    width:78%; /*导航宽度加上内容宽度的和刚好为100% */
    top:0px;   
    }
#footer {
    clear:both; /* 确保页脚位于下方 */
    }
#header_inner, #nav_inner, #content_inner, #promo_inner {
    overflow:hidden; /* 裁剪（隐藏）过大的元素以免由于它们扩展而破坏布局*/
    }
#header_inner { 
    padding:1em 2em; /* 在盒子与内容之间创建间距 */
    }

#nav_inner {
    padding:1em .8em; /* 在盒子与内容之间创建间距 */
    border-right:3px solid #B33;
    }
#content_inner { 
    padding:0 1em 1em 1.5em;/* 在盒子与内容之间创建间距 */
    }
#footer_inner {
    padding:.5em 1em; /* 在盒子与内容之间创建间距 */
    text-align:center;
    }

/* 两栏流动布局：注释代表不同的内容*/

body {
    text-align:center; 
    }
#main_wrapper {
        /*设置流动范围，如果超出这个范围，将应用固定布局*/
    max-width:960px; /* 设置流动的最大宽度 */
    min-width:720px; /* 设置流动的最小宽度 */
    margin-left:auto;  
    margin-right:auto; 
    text-align:left;
    }

#header {
     
    }

#nav {
    width:140px; /* 让导航的宽度固定，使其不受窗口缩放影响 */
    float:left; 
    }

#content {
　　/* default auto width */

    margin-left: 140px; /*内容的左外边距等于nav分栏的宽度*/
    }

#footer {
    clear:both; 
    background:#DDC; 
    }

#header_inner, #nav_inner, #content_inner, #promo_inner {
    overflow:hidden; 
    }

#header_inner { 
    padding:1em 2em; 
    }

#nav_inner {
    border-right:3px solid #B33;
    }

#content_inner { 
    padding:1em 1em 1em 1.5em; 
    }

#footer_inner {
    padding:.5em 1em;
    text-align:center;
    }
  

body {
    margin:0px;
    padding:0px;
    text-align:center; /* IE6 needs this to center the layout in the browser window */
    }
#main_wrapper {
    width:880px; /* sets max layout width */
    margin-left:auto;  /* centers layout in browser */
    margin-right:auto; /* centers layout in browser */
    text-align:left; /* resets the centering hack for IE6 on the body tag */
    position:relative;
    height:100%;
    background-color:#585;
    }
#header {
    /* full width by default */
    }
#content {
    position:absolute;
    padding:0;
    width:600px;
    left:130px;
    }
#nav {
    position:absolute;
    left:0px;
    width:130px;
    background:transparent;
    margin-bottom:300px;
    }
#promo {
    position:absolute;
    right:0px;
    width:150px;
    background:transparent;
    }
#footer {
    /* full width by default */
    }
#header_inner, #nav_inner, #content_inner, #promo_inner {
    overflow:hidden; /* prevents oversize elements from breaking the layout */
    }
#header_inner {
    padding:.25em 2em;
    }
#nav_inner {
    margin:1em 1.2em;
    }
#content_inner {
    margin:1em 2.5em 1em 2em;
    padding:0;
    }
#promo_inner {
    margin:1em 1.2em;
    }
#footer_inner {
    padding:.5em 10em;
    text-align:center;
    }

/* THREE COLUMN LIQUID CENTER LAYOUT */

body {font: .8em verdana, arial, sans-serif;}
* {margin:0; padding:0;}
div#main_wrapper {min-width:760px; max-width:880px;  margin-left:auto; margin-right:auto;} /* centers layout when > max width */
div#header {
    width:auto;
    }
#threecolwrap {
  float:left;
  width:100%;
  }
#twocolwrap {
     float:left;
    width:100%;
    display:inline; /* stops IE doubling  margin on float*/
    margin-right:-170px;  /*CWS - neg margin move */
    }
 #nav {
     float:left;
     width:150px;
    display:inline; /* stops IE doubling  margin on float*/
     }
 #content {
     width:auto;
     margin-left:150px;
     margin-right:170px;
     height:1%;
    }
#promo {
     float:left;
     width:170px; 
    display:inline; /* stops IE doubling  margin on float*/
    }
 #footer {
     width:100%;
     clear:both; 
     }
/* end of structural styles */ 

/* inner div margin */
#header_inner, #nav_inner, #content_inner, #promo_inner {
    overflow:hidden; /* prevents oversize elements from breaking the layout */
    }
#header_inner {
    padding:1em 2em;
    }
#nav_inner, #promo_inner {
    padding:.5em .5em 1em 1em;
    }
#content_inner {
    padding:0 1em 1em 1.5em;
    }
#footer_inner {
    padding:.5em 10em;
    text-align:center;
    }
/* end inner div margins */