[css layout][03] three percentage columns

1.作者方法

1 div#wrapper{float:left;width:100%}
2 div#content{margin-right: 50%}
3 div#navigation{float:left;width:25%;margin-left:-50%}
4 div#extra{float:left;width:25%;margin-left:-25%}
5 div#footer{clear:left;width:100%}

2.这个貌似很简单

 1 #wrapper {
 2   width: 50%;
 3   float: left;
 4 }
 5 #navigation {
 6   width: 25%;
 7   float: left;
 8 }
 9 #extra {
10   width: 25%;
11   float:left;
12 }
13 #footer {
14   clear: both;
15 }

3.全部float向右，再用position和负边距弄过来，没事找事了

 1 #wrapper {
 2   width: 50%;
 3   float: right;
 4   margin-left: -50%;
 5   position: relative;
 6   left: -50%;
 7 }
 8 #navigation {
 9   width: 25%;
10   float: right;
11   margin-left: -25%;
12   position: relative;
13   left: -25%;
14 }
15 #extra {
16   width: 25%;
17   float:right;
18 }
19 #footer {
20   clear: both;
21 }

4.模仿作者方法，但是float向右，注意需要移动的具体位置

 1 #wrapper {
 2   width: 100%;
 3   float: right;
 4 }
 5 #content {
 6   margin-right: 50%;
 7 }
 8 #navigation {
 9   width: 25%;
10   float: right;
11   margin-right: -75%;
12 }
13 #extra {
14   width: 25%;
15   float:right;
16   margin-right: -100%;
17 }
18 #footer {
19   clear: both;
20 }

其他的乱七八糟的了。