In firefox, it works great and the table border aligns perfectly with the browser viewport. In IE, the height portion seems to be based on the window's total height and doesn't clip out the various tools and menus at the top of the screen. So, the bottom of the table extends off the screen.
With any other position type other than fixed, the height seems to be ignored. I assume it is taking up 100% of the page's body element which is only as big as the content. And with fixed, I can't scroll to see my missing bottom portion, even if the extra size didn't bother me.
I think it'll be easy to see what I'm trying to achieve there. It's actually a site revamp. http://fj.eckish.net was one of my first web projects when I was trying to learn php and whatnot. Armed with more knowledge and experience, I wanted to overhaul the site from the ground up... ironically I ran into this issue early on.
I think I found my problem, but still not the solution. I had a 'height: 100%' in the menu td from something I was trying earlier. When I remove that, the table itself lines up correctly, but the fixed height applied to the header td no longer seems to work.
I'm willing to evolve, though. If Divs are the better way to go, I'm willing to try it out. I'll describe my goal more precisely:
-I want a header that has a fixed height, but adjusts to the window's width.
-I want a menu below that and to the side that has a fixed width, but adjusts its height to the remaining portion of the screen.
-And I want the main display to take up all remaining room.
-I want no scrollbars to appear on the screen, regardless of user resolution (assuming they aren't using something rediculously small or have a bajillion toolbars on their browser taking up half the screen space). But I also don't want to restrict my site to only a set size of what I think will be the smallest supported size.
Designing a site with no degradbility in mind isn't really a good idea.Take you current site for example, I'm using a 1280 x 1204 SR and a reduction of my browser (without add-on tool-bars) by about 10% forces me to scroll. reduction down to 20% of the screen compresses your menu to only a few characters in width.
Use this as a starting point, You'll need to play with it, but it will get you started. I've given the container a min-width of 800px, you can, of course, remove this, but you should use some min-width.
Ok, I think I found some settings I'm happy with. I will deal with the % width menu by right aligning it and not showing the border. Then it won't appear to change size, just stay 'centered' with the rest of the page.
I don't think I've ever had to to mix fixed and percentage widths in this manner, and to be honest I'm lost at the moment as to how / if it can be done.
I can think of a work round that would achieve what you want with absolute positioning, but it's dirty;
can allow for page content being higher than window, but can't deal with it being wider (say using an image that's wider than the viewers screen width would cause the header to cut off at the broswer width, and of course, rest of content would move to width of the image) and it also make no allowence for smaller screen reslolutions (even 800px would be a problem if any images in the content (combined with the width of the menu) were wider than about 780px;
I'm sure there has to be a better way of doing it.