HTML/CSS guru help needed!

I am banging my head against a wall trying to code up an HTML interface for a new web application. I’ve tried it with fluid CSS and I’ve tried it with absolutely-positioned CSS, but for the life of me I can’t get it to work. (I’m about to try it with HTML tables.) Viz:

One-sheet workarea

Design restrictions and considerations:

  1. I can’t use Flex, as the app will be embedded within another app that barfs on Flash.
  2. The viewport should not scroll, and the content should always fill the viewport.
  3. Viewport resizing should be graceful. (The arrows indicate direction of stretch.)
  4. The right column should always be 200px wide, no matter how wide the viewport.
  5. It would be nice if the lower boxes’ top edges were flexible enough to account for later additions or deletions in the upper boxes. (That is, it would be nice if their top coordinates were not absolute to the viewport.)
  6. I’d prefer to do it without crazy JavaScript positioning. If it’s elegant, that’s fine, but JS positioning always seems brittle to me.
  7. The lower boxes will have inner content that is scrollable. This shouldn’t matter, but your solution cannot reveal browser bugs that contradict this.
  8. It should work on IE6, IE7, and Firefox. Safari compatibility is a bonus, but not required.
  9. People will be spending their entire workdays in this interface, so nasty memory leaks are a no-no.

I know Google Reader uses a similar interface, but I think they use JS resizing and absolute positioning. And theirs occasionally goes haywire so that I have to do a hard-reload of the window. Hence why I’m not too keen on JS solutions. But at this point … I’ll take what I can get.

Can anyone offer insight or maybe links to sites that use this kind of layout? (Not just two-column, mind you, but full-viewport.) Thanks!

By Rick Osborne

I am a web geek who has been doing this sort of thing entirely too long. I rant, I muse, I whine. That is, I am not at all atypical for my breed.