html{
    font-family:arial;
}
body{
    margin:0;
    padding:0;
    /* set these to zero and adjust elsewhere as desired - personal taste */
}

#nav{
    position:absolute;
    width:250px;
    border-right:1px solid black;
    border-top:0;
    border-bottom:0;
    height:100%;
    z-index:1
    /* z-index is the stacking order for rendering.  if #nav is below
       #content, the links will not be clickable
       */
}
#wrapper{
    border:0 solid green;
    /* relative makes child elements be absolutely relative to this element */
    position:relative;
    height:100%;
    min-width:800px;
}
#content{
    z-index:0;
    border:0 solid red;
    position:absolute;

    /* tickery: both #nav and #content have the same origin,
       then we use padding to push the content past #nav, s
       so use the width of #nav plus whatever extra
       space you want for text read-ability - i chose 20px
       */
    padding-left:270px;

    /* now also set some right padding to offset from the window edge */
    padding-right:20px;
   /*
      can also be achieved this way (top/right/bottom/left):
      padding: 0px 20px 0px 250px;
  */
}
table{
/*position:static;*/
border:0 solid red;
}

table td{
    vertical-align:top;
}

hr{
    border:1px solid black;
}

a{
    color:blue;
    text-decoration:none;
}

ul{
}

p{
    padding-right:40%;
}

.comment{
    color:#F00;
}

div.code{
    width:650px;
    border:1px dashed #000;
    background-color:#FFE;
    padding:10px;
}