CSS layout with max heights not working that well

So, for a website I've been trying to get a specific layout to work across the IE browsers (FF + Chrome are a plus if they work, but usually they do).

Below you can see the layout I'm trying to achieve; alt text http://dl.dropbox.com/u/2199846/layout.png

As you can see, this is just a slight variation of a multi-column layout that you can see around the internet. Just with some added extra's.

- no div should ever exceed the page height, if they do, they should just overflow (but normally that will only happen for the middle part)

- the "toggle" link should toggle the div below visible/invisible (got the jquery code and all, no issues there), but that toggle should offcourse expand/decrease the width of the middle div.

I'm at the end of my possibility's here, and tried changing to a full table layout开发者_如何学Python, but that had the problem of always expanding when content got too much...

If any of you CSS heroes out there know how to make this layout, I'll be very grateful!!

EDIT:

What I forgot to add is that certain parts of this design should be fixed width/height. The top part should be 60px height, right and left side should be 200px width. And the small bar (+ toggle bar) should be 30px high.

Of course I'll try to work from the example posted below, but I thought I'd add this edit just in case someone finds it challenging to make (I know I find it challenging, yet I'm not so good yet in CSS for now)

---

http://jsfiddle.net/YGgTx/1/

this is a mock up of what you are trying to do I believe. As it indicated by the other posters you may want to use hide() to handle the menu effect. If there is anything wrong with this mockup let me know, I do not have IE6 installed but it works on 8.