title: maintain aspect ratio on browser resize
body: <p>The wrapper container css is width:auto; max-height:70%;</p>
  
  <p>I want the divs to maintain their aspect ratio when browser window height changes.</p>
  
  <p>jfiddle:  <a href="http://jsfiddle.net/7JNuU/" rel="nofollow">http://jsfiddle.net/7JNuU/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="feedwrapper"&gt;
  
  &lt;!--FULL group--&gt;
  &lt;div id="tile"&gt;
  &lt;div id="fullcell"&gt;1&lt;/div&gt;
  &lt;/div&gt;
  &lt;!--FULL group--&gt;
  
  &lt;!--4up group--&gt;
  &lt;div id="tile"&gt;
  &lt;div id="solocell"&gt;1&lt;/div&gt;
  &lt;div id="solocell"&gt;2&lt;/div&gt;
  &lt;div id="solocell"&gt;3&lt;/div&gt;
  &lt;div id="solocell"&gt;4&lt;/div&gt;
  &lt;/div&gt;
  &lt;!--4up group--&gt;
  
  &lt;!--2top group--&gt;
  &lt;div id="tile"&gt;
  &lt;div id="solocell"&gt;1&lt;/div&gt;
  &lt;div id="solocell"&gt;2&lt;/div&gt;
  &lt;div id="cell2xbot"&gt;3&lt;/div&gt;
  &lt;/div&gt;
  &lt;!--2top group--&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#feedwrapper{
  width:auto;
  max-height:70%;
  top:80px;
  bottom:60px;
  margin-bottom:80px;
  left:300px;
  position:absolute;
  background-color:#FFF;
  white-space:nowrap;
  display:block;
  }
  #tile{ position:relative; border:none; padding:0px; min-width:640px; height:100%; margin:0px 2px 2px 0px; background-color:#CC6; float:left;}
  
  #fullcell{width:100%; height:100%; background-color:#F99; display:block;}
  #solocell{ width:50%; height:50%; background-color:#36C; display:block; float:left;}
  #cell2xbot{ width:100%; height:50%; background-color:#C93; display:block; float:left;}
  #cell2xtop{ width:100%; height:50%; background-color:#C66; display:block; float:left;}
  #cell2yleft{ width:50%; height:100%; background-color:#99C; display:block; float:left;}
  #cell2yright{ width:50%; height:100%; background-color:#FC6; display:block; float:right;}
  </code></pre>
  
  <p>The page I'm working on is:  <a href="http://www.jordache.com/connect.php" rel="nofollow">http://www.jordache.com/connect.php</a></p>
  
  <p>The grid uses squares and rectangles.
  50%x50% squares, 100% squares, 50%x/100%y rect, and 100%x/50%y rect.</p>
  
  <p>There must be a simpler way.... grrrrr... help!</p>