dcsimg
This is the top navigation bar.
This is the advertisement bar.
This is the "Tip of the day" box.
With some break elements to make it higher.


content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content

And the HTML code looks like this:

...

<style>

  body {

    margin:9px 9px 0 9x;

    padding:0;}

  #level0 {

    background:#FC0;

    position:relative;}

  #level1 {

    margin-left:143px;

    padding-left:9px;

    background:#FFF;}

  #level2 {

    background:#FFF3AC;}

  #level3 {

    margin-right:143px;

    padding-right:9px;

    background:#FFF;}

  #main {

    background:#CCC}

  #topBar{

    background:#FC0;}

  #advBar{

    background:#FFF3AC;}

  #tipDay{

    float:right;

    width:175px;

    background:#FFF3AC;}

  #lftBar {

    position:absolute;

    width:143px;

    top:0;

    left:0;}

</style>

...

<body>

  <div id="level0">

    <div id="level1">

      <div id="topBar">

        This is the top navigation bar.

        <div id="advBar">

          This is the advertisement bar.

        </div>

      </div>

      <div id="level2">

        <div id="level3">

          <div id="main">

            <div id="tipDay">

              This is the "Tip of the day"...

            </div>

            The code you are reading.

          </div>

        </div>

      </div>

    </div>

    <div id="lftBar">

      This is the left navigation ...

    </div>

  </div>

</body>

...

            
This is the left navigation bar. This div has its width set to the same value than the left margin of "level1". Its absolutley positioned with respect to the body element.