Autosizing div with correct ratio + min heights/widths

JavaScript
1

hey all

little puzzle for ya because i can’t think anymore.

so i have a div that is a minimum of 960px wide x 500px high with a minimum of 20px margin to the left + right of it. there should be no scroll bars unless you go under the minimum dimensions (including left + right margin). when you resize the window, the #main div should resize (in correct ratio). here is my attempt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        function resizeFrame() {
          var windowWidth = $(window).width();
          var windowHeight = $(window).height();
          var docWidth = $(document).width();
          var docHeight = $(document).height();
          var minWidth = 960;
          var minHeight = 500;
          var headerAndFooter = $('#header').height() + $('#footer').height();
          if (windowHeight > (minHeight + headerAndFooter)) {
            var newHeight = windowHeight - headerAndFooter;
            $('#main').css('height',newHeight);
            var newWidth = newHeight / minHeight * minWidth;
            $('#main').css('width',newWidth);
          }
        }
        jQuery.event.add(window, "load", resizeFrame);
        jQuery.event.add(window, "resize", resizeFrame);
      });
    </script>
    <style type="text/css">
      html,body {background:#000;margin:0;width:100%;height:100%;text-align:center;}
      body, #header, #footer {min-width:1000px;}
      #header {background:red;width:100%;height:80px;}
      #wrap {background:blue;margin:0 20px;}
      #main {margin:0 auto;background:#fff;}
      #main, #wrap {min-width:960px;min-height:500px;}
      #footer {background:yellow;height:50px;}
    </style>
  </head>
  <body>
    <div id="header">header</div>
    <div id="wrap">
      <div id="main">resize this div with correct ratio</div>
    </div>
    <div id="footer">footer</div>
  </body>
</html>
2

can’t edit first post but here is where it stands. only issue i’m running into is if you try and resize the width quickly.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        function resizeFrame() {
          var windowWidth = $(window).width();
          var windowHeight = $(window).height();
          var docWidth = $(document).width();
          var docHeight = $(document).height();
          var mainWidth = $('#main').width();
          var mainHeight = $('#main').height();
          var minWidth = 960;
          var minHeight = 500;
          var margin = 40;
          var headerAndFooter = $('#header').height() + $('#footer').height();
          
          function resizeWidth() {
            var newWidth = windowWidth - margin;
            $('#main').css('width',newWidth);
            var newHeight = newWidth / minWidth * minHeight;
            $('#main').css('height',newHeight);
            mainWidth = $('#main').width();
            mainHeight = $('#main').height();
          }
          
          function resizeHeight() {
            var newHeight = windowHeight - headerAndFooter;
            $('#main').css('height',newHeight);
            var newWidth = newHeight / minHeight * minWidth;
            $('#main').css('width',newWidth);
            mainWidth = $('#main').width();
            mainHeight = $('#main').height();
          }
          
          if (windowWidth >= docWidth) {
            resizeWidth();
          }
                    
          if (windowHeight < (mainHeight + headerAndFooter)) {
            resizeHeight();
          }
          
          $('#w-height span').html(windowHeight);
          $('#d-height span').html(docHeight);
          $('#m-height span').html(mainHeight);
          $('#w-width span').html(windowWidth);
          $('#d-width span').html(docWidth);
          $('#m-width span').html(mainWidth);
        }
        jQuery.event.add(window, "load", resizeFrame);
        jQuery.event.add(window, "resize", resizeFrame);
      });
    </script>
    <style type="text/css">
      html,body {background:#000;margin:0;width:100%;height:100%;text-align:center;min-width:1000px}
      #header {background:red;height:80px}
      #main {margin:0 auto;background:#fff;min-width:960px;min-height:500px;}
      #footer {background:yellow;height:50px;}
    </style>
  </head>
  <body>
    <div id="header">header</div>
    <div id="main">
      <div id="w-width">window width: <span></span></div>
      <div id="d-width">document width: <span></span></div>
      <div id="m-width">main width: <span></span></div>
      <br />
      <div id="w-height">window height: <span></span></div>
      <div id="d-height">document height: <span></span></div>
      <div id="m-height">main height: <span></span></div>
    </div>
    <div id="footer">footer</div>
  </body>
</html>