3栏布局

==============================================================================================

左右栏固定宽度，中间栏自适应其余宽度。 
 
文档顺序：左，中，右
1、一种不推荐的做法，用绝对定位实现。
   实现要点：左栏left、右栏right设为绝对定位，分别设置width。左栏设置left和top，
   右栏设置right和top。自适应的中间栏设置为相对定位，设置margin:0 200px(不用相对定位也可可以了)。
   ************
   问题：如果非自适应的栏高度超过自适应的栏高度，并不能撑开底下的footer。
  
2、用浮动实现。
    实现要点：三栏均为float: left。
    中间栏设width为100%，设margin:0 -200px。margin-left和margin-right为-200px意味着原本应在的位置
    可以向左和向右再占200px（width仍然占着 100%的宽度，只是不用换行去占这么大地了），
    则此时3栏位于同一行，且左栏与中间栏左侧重叠，右栏与中间栏右侧重叠。只要再将中间栏的数据左右往
    里各挤200px即可。所以中间栏中再加了个div，设其margin:0 200px即可。（左右栏宽度都设置为200px;)


文档顺序：中，左，右
1、再用一个包裹着（中，左），于是变成（左，中），（右）两栏布局。
2、三栏均为float: left。中间栏设width为100%。一行。此时左栏和右栏将换行显示。
   通过设置左栏的 margin-left: -100%;和右栏的margin-left: -200px;使三栏处于同一行显示。
   此时刚好处于合理位置故无需设为相对定位进行偏移。
   此时3栏位于同一行，且左栏与中间栏左侧重叠，右栏与中间栏右侧重叠。只要再将中间栏的数据左右往
   里各挤左右栏的宽度即可。所以中间栏中再加了个div，设其margin:0 200px即可。

   注意：为了兼容IE6，container的zoom:1不可少，它是为了使元素支持haslayerout，常常IE6出现误
   差不兼容时，应先试下zoom:1是否可以解决。
  
  
 3、圣杯布局：
   实现要点：首先设置装着3栏的容器container的padding:0 150px 0 200px
   （ps:左栏width是200px，右栏width是150px）。由于中间栏是第一个DIV，且设了中间DIV的width:100%。
   则下面要做的就是：1. 把左栏DIV放到container的padding-left的空白处：设margin-left: -100%
   （这个100%是container的width的100%，当然不包含padding）， 则往左移动了100%的距离，
   但仍然在 padding-left空白处的右侧，所以再利用相对定位，使左移200px，即left:-200px，或者 right:200px。
    2. 把右栏DIV放到container的padding-right的空白处：同上，先使同行显示则设margin-left: -150px，
    再设right:-150px移动到正确位置。
   
    但IE7解析有BUG.
    #container{padding: 0 150px 0 200px;}
    #container .column{position: relative;float: left;}
    #center{width: 100%;}
    #left{width: 200px;left: -200px;margin-left: -100%;}
    #right{width: 150px;margin-left: -150px;right: -150px;}
    /*IE6 7 Fix*/
    #left{left:-200px;*left: 150px; /* RC width */
    left:-200px/0;
    }

 

文档顺序：左，右，中
 1、左栏float:left;右栏float：right;中栏自然流动，width：auto,环绕左栏，overflow：hidden；
==============================================================================================
3栏都固定宽度。

文档顺序：1 2 3 （假设有3个模块，模块分别命名为1，2，3）

1、水平：1 2 3 ，全部都float：left
2、水平：3 2 1 ，全部都float: left
3、水平：2 1 3 ，
     1 和2 float:left; 3 float:right;
     1 margin-left:2的框宽；display:inline;//兼容IE6的负边距BUG
     2 margin-left:-（1+2的框宽）；
4、水平：3 1 2 ，
     1和3 float:left; 2 float:left;
     1 margin-left:2的框宽；display:inline;//兼容IE6的负边距BUG
     3 margin-left:-（1+2的框宽）；

==================================================================================
很多网页设计是不需要等高的，通常可以用背景色搞定，或者很多背景色本来就是空白的。
当用CSS实现等高，通常就是用margin-bottom负值和padding-bottom正值抵消来实现。

在需要等高的每个模块中：

 margin-bottom:-10000px;
padding-bottom:10000px;