How can i adapt main wrapper and container to higher screen resolution?

This is not a really straight-forward problem to solve because you have to take it apart a bit. Let's look at a couple of points to get you started:

1. First, make your footer an absolutely positioned div. On resize or render, you'll have to get its offsetHeight and provide it as a reference.You'll also set its "top" position the height of the viewport minus its height. Here's a convenience function to get the viewport height:
   
       function getViewportHeight() {
         var vpHeight = self.innerHeight || (document.documentElement.clientHeight || document.body.clientHeight);
         return vpHeight;
       }
   
   So, "top" would be calculated as:
   var footer = document.getElementById("footer");
   var footerTop = getViewportHeight() - footer.offsetHeight;
   
   
2. The cool thing about getting footerTop is that it will also double as the reference height for the rest of your containers. The simplest thing to do would be to wrap your header and body containers within another div, then set its height as footerTop.
   
   
3. I'm assuming your header is a fixed height, so to size the body area, simply subtract the header's height from the footerTop value. Even if your header is not a fixed height, you can still get its offsetHeight and subtract if from footerTop.

The point to all this is that you have to think about this type of resizing with respect to reference containers and "sized" containers. Once you identify which containers you'll use as references, it's simply a matter of sizing the other containers relative to those references.

That sounds like it could really work out nicely..
I had hoped i could perhaps solve it with less javascript and more CSS.
But then again i'm using javascript already and i need a quick solution for a prototype.
So it probably will work just fine..

The only thing i was worried about at a first glance
was that the footer would end up somewhere on top of the body or header when calculating it's position with viewportHeight - footer.offsetHeight.. But when have a smaller viewport i'll have to check for this in the script and use your other solution to just set it's position to the sum of Header and Bodys Height.

I'll try this out the first thing tomorrow. It is a very good solution and the points are as good as yours already. Just have to see how much this slows down the page and if some other problems araises.

"I had hoped i could perhaps solve it with less javascript and more CSS."

Sure you can do this easily with CSS, if you want the page to occupy ALL the browser, just do this --

BODY, HTML  { width:100%; min-width:100%; height:100%; min-height:100% }

Now you are taking 100% of the browser space, no matter what the browser screen size.  WHat more do you need?

In theory, doing the above will work, and in fact, I actually failed to mention that you have to give 100% height to both html and body. However, in practice, because you're dealing with elements that have a visual dependency upon each other if not necessarily a physical dependency, you need to introduce JavaScript into the equation to correctly size elements with respect to each other.

you only need CSS to size the page to the maximum browser screen size -- works on all resolutions.

With respect to performance, I've actually applied this very technique to a fairly complex interface that I'm currently working on (sorry can't share the code, as I'm using a proprietary object framework that I'm not ready to publish yet), and it works great across all the browsers. The challenge will be that you will have to add some extra height offset to Mozilla-based browsers when calculating the top position of the footer and the height of the center content area because Mozilla actually cuts the viewport short when you set it 100% in the CSS. In other words, you'll have to do a bit of eye-balling to get it to work fully cross-browser. But once you've figured out the offsets, it'll work flawlessly.

I'm sorry for keeping you waiting guys, i've been busy up to my knees today with other things.

ok, some comments on scrathcyboys comments:

C1:

"BODY, HTML  { width:100%; min-width:100%; height:100%; min-height:100% }"

This sets some kind of referense for the other objects on the page to relate to correct?
I mean doesn't the browser automaticly figure that the page should be viewed in the whole window if possible? And is this not neccesary to do in internet explorer as well?.. (since i.e seems to have something against min-width/min-height).

Right now i'm using the following for i.e:

div#main_wrapper
{
    width: expression(document.body.clientWidth < 1000? "1000px" :
    document.body.clientWidth > 1800? "1800px" : "auto");
}

Perhaps it's not a good idea to limit the max-size.
But i admit that i ripped this code straight off to see if it could work. ^^

C2:

"Now you are taking 100% of the browser space, no matter what the browser screen size.  What more do you need?"

I need the header to have a fixed height, the container to wrap around two <table>-parts

(The table parts i would rather have as DIV's.. but hey.. it's complicated already. And i have no other way to make shadows that can grow in size and still be transparent). perhaps i'll redo theese on a later occation..)

As i said it should wrap around them when in a smaller sized browser window and grow higher in a larger browser window, and to get the footer to be placed at the bottom. It's to much static sized information on the page to show it on the page all at once on a 1024x768 resolution, but ok when on a larger screen. And i don't want to shrink the content when on a lower resolution, otherwise that could have been one approach.

so i guess what i really need is for the main_wrapper to never be smaller than all of the content objects heights. And that the CONTAINER and ADDS grows in size when the page grows higher. And makes sure that the footer always ends up exactly at the bottom of the page, not 3 px above it, and preferrably with the margins still intact. But how do i make the CONTAINER and ADDS grow with CSS?.. do i apply a percentual height to it? last time i tried setting it to 100% the page became twice the height of the original height. Still it works in my width solution. that's just wierd.

Or is GoofyDawg's comment "you need to introduce JavaScript into the equation to correctly size elements with respect to each other." the answer?.

How would you have done? it's tempting to apply the javascript method, but in the end css is always css and a lot faster.. right?

"I mean doesn't the browser automaticly figure that the page should be viewed in the whole window if possible? "

No no no and NO!  You misunderstand -- Divs are only as big as the text in them or what you specify.  Same for BODY in tableless layout.  Anyway, learn a bit about what I posted, and good luck.

"Divs are only as big as the text in them or what you specify.  Same for BODY in tableless layout."

ok, that figures.. well i theoreticaly found out a way to get the result i wanted, based on GoofyDawgs  note about javascript and heights. But the problem is that i can't get the heights that i want..

i'm trying to do:
if ((document.body.clientHeight) > (document.getElementById('main_wrapper').style.height))

but the right argument doesn't return anything.. at all.. nada... " " .. it should atleast return something like not assigned value or something when throwing it on the screen with alert.
And that makes my statement always true. Neither does the other DIVs like header and footer return anything.

so i tried to pull a stunt that i've done before and use the DomLoaded way, displayed
underneath.. since i.e for example can't get size-information from elements till they are loaded properly.
Then i do my alert in the init() instead.. But it still doesn't show any value..

    var DomLoaded =
    {
        onload: [init()],
        loaded: function()
        {
            if (arguments.callee.done) return;
            arguments.callee.done = true;
            for (i = 0;i < DomLoaded.onload.length;i++) DomLoaded.onload[i]();
        },
        load: function(fireThis)
        {
            this.onload.push(fireThis);
            if (document.addEventListener)
                document.addEventListener("DOMContentLoaded", DomLoaded.loaded, null);
            if (/KHTML|WebKit/i.test(navigator.userAgent))
            {
                var _timer = setInterval(function()
                {
                    if (/loaded|complete/.test(document.readyState))
                    {
                        clearInterval(_timer);
                        delete _timer;
                        DomLoaded.loaded();
                    }
                }, 10);
            }
            /*@cc_on @*/
            /*@if (@_win32)
            var proto = "src='javascript:void(0)'";
            if (location.protocol == "https:") proto = "src=//0";
            document.write("<scr"+"ipt id=__ie_onload defer " + proto + "><\/scr"+"ipt>");
            var script = document.getElementById("__ie_onload");
            script.onreadystatechange = function() {
                if (this.readyState == "complete") {
                    DomLoaded.loaded();
                }
            };
            /*@end @*/
           window.onload = DomLoaded.loaded;
        }
    };

Do you know what's wrong?

Ok.. i just figured out what my problem with that statement was..
as you mentioned earlier goofyDawg you said offsetHeight. not height.. ^^   my bad..

i'll dig into this again..

Finally I made it work.. But when I took the height of the main_wrapper it returned the height minus the hight of footer.. wich makes sense since i positioned it absolute..i'm just curious why when I tested to change it to static that it worked in Explorer, but not in Firefox.. seems wierd.. Ooh well, it works and it's not to slow either so it's a nice solution =)..

Even tough scrathcyboy had some good comments as well. I guess my points goes to you
GoofyDawg since my solution builds on your first comments.

You have been to great help both of you! =).. Thanks!

Static positioning should work in Firefox, and not in IE... weird. But I wouldn't recommend using static positioning in any case. Absolute should work just fine.