Relative width for a CSS layout, fixed and fluid mix

Question

Hello,

I am trying to make a chatroom layout like the following:

Now my problem is that I am not sure how to have the container box occupy the whole width and height (with valid doctype) and then make the center div grow if the window grows keeping the rest constant.

i am well aware of js/css. so i just need some beginning guideline. i would like to avoid javascript to process and then set heights and widths.

Answer 1

body, html{
margin:0;
padding:0;
height:100%;
}

   #container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:100%;
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
}
.header{
width:100%;
height: 100px;
display:block;
}

.body-left{
width:70%;
float:left;
}

.body-right{
width:30%;
float:right;
}
.clear{
clear:both;
}

.footer{
width:70%;
float:left;
}

and HTML

<div id="container">
<div class="header"></div>
<div class="body-left"></div>
<div class="body-right"></div>
<div class="clear"></div>
<div class="footer"></div>
</div> 

That is it if that is what you seek

or use this javascript to find out the height and assigne it to your container :

function getWindowHeight() {
                var windowHeight = 0;
                if (typeof(window.innerHeight) == 'number') {
                    windowHeight = window.innerHeight;
                }
                else {
                    if (document.documentElement && document.documentElement.clientHeight) {
                        windowHeight = document.documentElement.clientHeight;
                    }
                    else {
                        if (document.body && document.body.clientHeight) {
                            windowHeight = document.body.clientHeight;
                        }
                    }
                }
                return windowHeight;
            }


window.onload = init;



 function init(){
 document.getElementByID("container").style.height = getWindowHeight() + "px";

    }