Creating a mixed pixel/percentage layout with divs

Question

I am trying to make a page layout as can be seen in the attached picture. The problem is that I can't get it working properly. I spent half a day trying to get it working, but without success. I just want a fixed width div for the menu and next to that two divs creating columns that each take half of the remaining page width. Heights all need to be content dependent.

Anybody an idea? I could find much info about such mixed perecentage/pixel layouts, but I can't imagine it's that hard.

Picture:

Answer 1

Something like that:

<style type="text/css">
.container
{
  padding-left: 160px;
  position: relative;
}
.leftmenu
{
  width: 160px;
  height: 200px;
  background: red; /* For demo purposes */
  position: absolute;
  top: 0;
  left: 0;
}
.width50
{
  width: 50%;
  float: left;
}
.left-content
{
  height: 300px;
  background: green /* For demo purposes */
}
.right-content
{
  height: 150px;
  background: blue   /* For demo purposes */
}
.clear
{
  clear: both;
}
</style>
<div class="container">
  <div class="leftmenu"></div>
  <div class="content">
    <div class="width50 left-content"></div>
    <div class="width50 right-content"></div>
    <div class="clear"></div>
  </div>
</div>

That is only the inside container (without header or footer)