/*
  2 columns

  +------------------------------+------------------------------+
  | Header                       |                         Meta |
  +----------+--------------------------------------------------+
  | Menu     |       Content                                    |
  +----------+--------------------------------------------------+
*/

body {
  margin: .5em;
  padding: 0;
}

div#header, div#content, div#menu, div#meta, div#footer {
  border: thin solid #f00;
}

div#header {
  width: 12em;  /* if you change this, you must also change div#meta's margin-left */
}

div#container {
  border: thin solid #00f;
  position: relative;
  top: 0;
  left: 0;
}

div#content, div#footer {
  margin-left: 12em;
}

/*
  Win IE 5.0: left: .5em (body's margin-left)
  if (div#container has border) {
    Win IE 5.5: left: 0
    Win IE 6.0: left: 0
  } else {
    Win IE 5.5: left: -12em (- div#content's margin-left)
    Win IE 6.0: left: -12em (- div#content's margin-left)
  }
  correct:    left: 0
*/
div#menu {
  width: 11em;
  position: absolute;
  top: 0;
  left: .5em;   /* this is for Win IE 5.0 */
}
div#menu/* hide this from Win IE 5.0*/ {
  left: 0;  /* this is for Win IE 5.5 */
}
div#menu {
  voice-family: "\"}\""; /* some browsers have a parsing bug */
                         /* and will ignore the following rules */
  voice-family: inherit;
  left: 0;  /* this is for Win IE 6.0 */
}
html>body div#menu { /* hide this from Win IE <= 6.0 */
  left: 0;      /* this is correct */
}

div#meta {
  position: absolute;
  top: 1.5em;  /* x + body's margin-top */
  right: .5em;  /* body's margin-right */
  margin-left: 12em;  /* if you change this, you must also change div#header's width */
  text-align: right;
}