title: getting the height of a div to match the width when it shrinks responsively
body: <p>In the jsfiddle here <a href="http://jsfiddle.net/H3VW5/" rel="nofollow">http://jsfiddle.net/H3VW5/</a> I have 3 divs where the width is based on perencentage. Is there a simple way (without having an image in it) to get the height to match a certain aspect ratio so that when the window shrinks the height shrinks with the width to keep the same shape? IE. if the div size was <code>600px x 600px</code> at <code>60%</code> and the window shrunk to make the width <code>500px</code> the height would also shrink to <code>500px</code>?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*CSS:*/
  
  .div1 {width:60%; height:400px; background-color:#066; float:left}
  .div2 {width:20%; height:400px; background-color:#09F; float:left;}
  .div3 {width:20%; height:400px; background-color:#C00; float:left;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--HTML:--&gt;
  
  &lt;div class="div1"&gt;&lt;/div&gt;
  &lt;div class="div2"&gt;&lt;/div&gt;
  &lt;div class="div3"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>