CSS Assistance Please

[imagize]

I have attached a mockup design of my layout with all graphics removed. I am having real trouble creating this layout just with css. The main area causing me trouble is the bottom of the banner on the left side as it curls around the page. I had to use a table as a temporary fix and I am trying to find the solution to this. I cut the banner into 3 images, the recurring bg, the horizontal part and the little vertical part on the left hand side.

If anyone could help me with the solution that would be appreciated.

[Buddy Bradley]

I think I would probably approach this layout by using floats to create the leftnav and content areas (floated left and right respectively), and then use a negative margin-top on the content to drag it up over the header banner area.

#wrapper {
  width: 800px;
}
 
#topbar, #midbar {
  height: 25px;
}

#banner {
  height: 150px;
}

#leftnav {
  width: 125px;
  float: left;
}

#main {
  width: 675px;
  float: right;
  margin-top: -50px;
}

#content {
  width 500px;
  float: left;
}

#rightnav {
  float: right;
  width: 175px;
}

HTML:

<div id="wrapper">
  <div id="topbar">
    topbar
  </div>
  <div id="banner">
    banner
  </div>
  <div id="leftnav">
    leftnav
  </div>
  <div id="main">
    <div id="midbar">
      midbar
    </div>
    <div id="content">
      content
    </div>
    <div id="rightnav">
      rightnav
    </div>
  </div> <!-- /main -->
</div> <!-- /wrapper -->

Untested, but something like that.