[css layout][03] three percentage columns

1.作者方法

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

2.这个貌似很简单

#wrapper {
  width: 50%;
  float: left;
}
#navigation {
  width: 25%;
  float: left;
}
#extra {
  width: 25%;
  float:left;
}
#footer {
  clear: both;
}

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

#wrapper {
  width: 50%;
  float: right;
  margin-left: -50%;
  position: relative;
  left: -50%;
}
#navigation {
  width: 25%;
  float: right;
  margin-left: -25%;
  position: relative;
  left: -25%;
}
#extra {
  width: 25%;
  float:right;
}
#footer {
  clear: both;
}

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

#wrapper {
  width: 100%;
  float: right;
}
#content {
  margin-right: 50%;
}
#navigation {
  width: 25%;
  float: right;
  margin-right: -75%;
}
#extra {
  width: 25%;
  float:right;
  margin-right: -100%;
}
#footer {
  clear: both;
}

其他的乱七八糟的了。