[css layout][07] three fixed columns

1.

#container {
  width: 900px;
  margin: 0 auto;
}
#wrapper {
  float: left;
}
#content {
  margin: 0 200px;
}
#navigation {
  width: 200px;
  float: left;
  margin-left: -100%;
}
#extra {
  width: 200px;
  float: left;
  margin-left: -200px;
}
#footer {
  clear: both;
}

2.

#container {
  width: 900px;
  margin: 0 auto;
}
#wrapper {
  float: right;
}
#content {
  margin: 0 200px;
}
#navigation {
  width: 200px;
  float: right;
  margin-right: -200px;
}
#extra {
  width: 200px;
  float: right;
  margin-right: -100%;
}
#footer {
  clear: both;
}

3.

#container {
  width: 900px;
  margin: 0 auto;
}
#wrapper {
  float: right;
  width: 500px;
  margin-left: -200px;
  position: relative;
  left: -200px;
}
#navigation {
  width: 200px;
  float: right;
  margin-left: -400px;
  position: relative;
  left: -400px;
}
#extra {
  width: 200px;
  float: right;
  margin-right: -300px;
}
#footer {
  clear: both;
}

4

#container {
  width: 900px;
  margin: 0 auto;
}
#wrapper {
  float: left;
  width: 500px;
  margin-right: -200px;
  position: relative;
  left: 200px;
}
#navigation {
  width: 200px;
  float: left;
  margin-left: -300px;
}
#extra {
  width: 200px;
  float: left;
  margin-right: -400px;
  position: relative;
  left: 400px;
}
#footer {
  clear: both;
}