/******
 * Not involved in layout
 ******/

body { background-color: #fff; color: black; font-size: 100%;}
code { color:green; font-size: 90%; }
h1 { margin: 0; padding: 0; text-align: center; }
#head { width: 100%; background: #9f9; display:block; }
.sidebar p, .sidebar h2, .sidebar h3, .sidebar ul { margin: 10px; padding: 0; }
.sidebar li { margin: 0 10px 0 20px; padding: 0; }
.sidebar { background: #ffc; border: 1px solid black; }
.sidebar p, .sidebar li { font-size: 90%; }
.sidebar h2 { font-size: 120%; }
.sidebar h3 { font-size: 100%; }

/******
 * The basics. All the browsers get this bit right.
 ******/

#wrap {
  position: relative;
}
#wrap #main {
  margin: 0 11em;
}
#wrap .sidebar {
  width: 10em;
  position: absolute;
  top: 0;
}

/******
 * The following left:0 and right:0 properties ought to be
 * enough to finish the trick. Netscape 4 seems to want the
 * floats in there too though. Not sure why.
 ******/

#left {
  left: 0;
  float: left;
}
#right {
  right: 0;
  float: right;
}

/******
 * If you thought Netscape 4 was a pain, now we come to Internet
 * Explorer. First of all we use a slash-star-slash-star-slash
 * comment hack to stop Netscape 4 from going any further. Netscape
 * 4 is fine as it is now.
 *
 * Then we feed IE 5, 5.5 and 6 a bogus "left:-11em" value. Other-
 * wise the left column will overlap the centre one.
 *
 * Then we have to use a child selector to re-affirm the original
 * "left:0" value in decent browsers.
 *
 * While we're at it, we might as well remove the floating that
 * we added for Netscape 4's benefit.
 ******/

/*/*/
#left {
  left: -11em;
  float: none;
}
#wrap>#left {
  left: 0;
}
#right {
  float: none; 
}