Vertically split variable-sized div using CSS

Question

I'm trying to divide an auto-scaling div into two vertically using two other div's. What I have so far:

<div id='wrapper'>
  <div id='left'>some stuff</div>
  <div id='right'>more stuff</div>
</div>

with

#frame {
  position: static;
  width: 1000px;
  height: auto;
  /* more positioning stuff */
}
#left {
  position: absolute;
  width: 200px;
  height: 100%;
}
#right {
  position: static;
  margin-left: 200px;
}

This seems to work OK, except if the contents of #right are higher than those of #left. In this case, part of the contents of left are invisible. How can I make sure that the height of the left div is also taken into account when the needed height of #wrapper is calculated?

UPDATE

In the mean time, I've also tried to make both #left and #right static, but then the two dives are not displayed side by side anymore.

Answer 1

#wrapper {
    overflow-y:hidden;
}
#left {
    float:left;
    width:200px;
}
#right {
    margin-left: 200px;
}

If left needs a background color or background image you'll want to give that background image to the wrapper instead.

This won't work in IE6 and may give you trouble in 7 & 8 if you don't use an XHTML doctype...