Q:

How do I dynamically set the  to the correct length?

How can I set the height (dynamically) of the yellow <div id="box"> to fit inside the <div id="center"> without overlapping the Hello World section?
Please ignore the JavaScript, in the jsfiddle, its part of something else ;p
http://jsfiddle.net/XskMm/3/
Thank you for reading and answering!
EDIT:
I apologize for the poor phrasing the question. I'll try to explain exactly what I want.
There are two main <div>s on the page. I made one gray and one yellow. I wish to make the yellow div fit inside of the gray one (both length and width) and not protrude over the outline of the gray div.
My problem is that the <h1> and the <hr /> are pushing the <div id="box"> down (like they should), but the <div id="box"> isn't shrinking to the appropriate height so that it does not extend over the bottom of the <div id="center">

A:

Alright... trying this again.  If this isn't what you want, let me know.
Working example: http://jsfiddle.net/XskMm/8/
The code:
window.onresize = function() { myResizeFunc();  }

function myResizeFunc() {
    var DOMwidth = window.innerWidth? window.innerWidth: window.document.body.parentElement.clientWidth;
    var DOMheight = window.innerHeight? window.innerHeight: window.document.body.parentElement.clientHeight;
    if (DOMwidth>200) { document.getElementById('center').style.width = (DOMwidth-100) + 'px'; }
     else { document.getElementById('center').style.width = '100px'; }
    if (DOMheight>300) {
        document.getElementById('center').style.height = (DOMheight-100) + 'px';
        document.getElementById('box').style.height = (DOMheight-122) + 'px';
    }
     else {
         document.getElementById('center').style.height= '200px';
         document.getElementById('box').style.height= '178px';
    }

}

window.addEvent('domready', function() {
    myResizeFunc();
});

