HTML + CSS: semi-vertical align

Hello all,

I'm not at all an HTML and CSS expert - but sometimes I can't get around doing some of it. Just like now; and I've run into a problem that I have no idea how to go about doing this, and a friend of mine requested this layout specifically.

I want a field (div, probably) with content (the actual site, the div itself will have a scrollbar on overflow) with a specific site (in pixels) in the center of the screen, both vertically and horizontally. I've done this before, though I don't even remember how, just that it was very hacky. But I'd probably be able to do it again.
The only difference is that this time I want a menu above this div. This menu will have a decent size: it's an image in itself that is quite large. And in some browsers, it won't fit above the content. In this case, I want the content to go down such that the menu fits perfectly.

So, basically, I have two elements, a menu and a content box. Where:
1. Content box has a specific size.
2. The minimum height of the menu is half of (visible_height - content_height), but it gets bigger on overflow.
3. The content box is directly underneath this menu.

That should fix it; though I don't think there's a way to directly set this height, but there must be some way to do this...


Any ideas?


Thanks in advance,
EVOEx

If you want to get the visible height in pixels you need to use javascript.

If your menu is like a menu bar in windows forms, how about a DIV contains a TABLE with two rows?

If your menu is like a popup menu in general which floating around the document, you'll need a simple JavaScript to determine its position and probably its size too.

Here's a good article that should give you the concepts you need to know which CSS elements to tweak: A List Apart: Articles: In Search of the Holy Grail