新手必看的CSS3栏布局技巧

首先，任何一个布局通常都有headers, navigation bars, content containers, sidebars以及 footers. 我们在设计三栏主题的时候，最重要的目的就是发挥其最大的灵活性和自适应高度，这样才会看上去更加美观。下面9个三栏CSS布局将从多个方面来实现最好的布局方法，并都兼容IE和FF。
两个固定栏和一个可变栏

1) 3 Columns, The Holy Grail- 一个精致的3栏布局技巧示例

1. #leftcontent {
   position: absolute;
   left:10px;
   top:50px;
   width:200px;
   }
2. #centercontent {
   margin-left: 199px;
   margin-right:199px;
   margin-left: 201px;
   margin-right:201px;
   }
   HTML>body #centercontent {
   margin-left: 201px;
   margin-right:201px;
   }
3. #rightcontent {
   position: absolute;
   right:10px;
   top:50px;
   width:200px;
   }

2) 3 Column Fluid CSS Layout- 使用100%高度

1. #left { float: left; width: 155px; padding: 5px; position: relative; /*** IE needs this ***/ }
2. #right { float: right; width: 110px; padding: 5px; position: relative; /*** IE needs this ***/ margin-right: -120px; /** This negative margin-right value is the same as the right column width (width + padding). ***/ position: relative; /*** IE needs this ***/ }
3. #content { float: right; margin-right: -165px; /*** Same length as .outer padding-left but with negative value ***/ width: 100%; position: relative; /*** IE needs this ***/ }

3) 3-col Layout Via CSS
不需要表格，不需要定位，不需要Hack，就能实现自适应的相同高度。呃，需要一张小小的GIF图片。

1. #left { float:left; width:150px; margin:0; padding:0; background:url("corner.gif") top right no-repeat; font-size:80%; }
2. #right { float:right; width:150px; margin:0; padding:0; background:url("corner.gif") top right no-repeat; font-size:80%; }
3. #middle { margin:0 150px; background:yellow; font-size:80%; }

4) 3 Columns – Flanking Menus
这是另外一个强大的3栏布局技巧

三栏都固定

5) Multi-Column Layouts Climb Out of the Box

1. #container{ background-color:#0ff; float:left; width:500px; border-left:150px solid #0f0; ? /* The width and color of the left rail */ border-right:200px solid #f00; ? /* The width and color of the right rail */ }
2. #leftRail{ float:left; width:150px; margin-left:-150px; position:relative; }
3. #center{ float:left; width:500px; margin-right:-500px; }
4. #rightRail{ float:right; width:200px; margin-right:-200px; position:relative; }

6) LayoutGala’s 3 Fixed Columns

1. div#container {width:700px;margin:0 auto}
2. div#wrapper {float:left;width:100%}
3. div#content {margin-right: 300px}
4. div#navigation {float:left;width:150px;margin-left:-150px}
5. div#extra {float:left;width:150px;margin-left:-300px}
6.  

7) 3 Col Fixed SEO

1. #page_margins {width: 980px; min-width: 980px; max-width:none }
2. #main { float:left; width: 100%; background-color: transparent; background-image: url(../../images/bg_pattern.png); background-repeat:repeat-y; background-position:left; }
3. #col1 { width: 480px; float:left; margin-left: 240px; }
4. #col2 { width: 240px; float:left; margin-left: -720px; }
5. #col3 { margin-left: -5px; margin-right: 0; width: 240px; float:right;}

可变－百分比宽度

8 ) One True Layout

1. #block_1 { float: left; width: 34%; margin-left: 33%; }
2. #block_2 { float: left; width: 33%; margin-left: -67%; }
3. #block_3 { float: left; width: 33%; }

9) Max Design- Liquid insanity