Fixed-width CSS floated 2-column layout equal heights problem

I have a page design I'm trying to implement with a header (menu bar) and underneath that a div with static width in css. This div contains two divs - #contentArea and #menuArea, each of which have a header, middle and footer (header and footer have background images while middle fits开发者_开发技巧 to the content).

I've applied float: left and correct static width to #contentArea and #menuArea which works well, but I'd like to force these two to the same height. I looked to inline/inline-block solutions, but these seem to cause a lot of headaches for IE6/7. Unfortunately this design needs to display reasonably (not necessarily perfectly) back to IE6/FF3.

I've put a simple page demonstrating what I'm doing on my home server at http://home.theevilpenguin.org/c-Help/Index

Can anyone recommend a way to accomplish this or something to look into?

Thanks

You could try setting the attribute height: 100%; on the pageMenuArea div. That should make it the same height as the containing div pageBody.