HTML + CSS: semi-vertical align

[EVOEx]

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

[MK27]

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

[audinue]

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.

[Dino]

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