title: Set height of div to percentage of its container
body: <p>I have a <code>.container</code> div that is <code>600px</code> max in width or else <code>100%</code>.</p>
  
  <p>Inside this div is a <code>.content</code> div that I want to be 60% of the 100% of the container's width.</p>
  
  <p>More generally I'm trying to make a responsive <strong>rectangle</strong> div instead of a <strong>square</strong>.</p>
  
  <p><a href="http://jsfiddle.net/7zE9x/" rel="nofollow">http://jsfiddle.net/7zE9x/</a> (The image inside the content <em>should</em> be overflown, and have a y-scroll bar)</p>
  
  <p>That is </p>
  
  <p>My HTML is:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="content"&gt;
          &lt;img src="..." /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Where my css looks like:</p>
  
  <pre><code>.container {
      background: black;
      padding: 3%;
      position: relative;
      width: 100%;
      max-width: 600px;
  }
  
  .content {
      overflow: auto;
      height: 60%; /* Set this to 400px, meaning that it won't be responsive */
  }
  
  .content img {
      display:block;
      width: 100%;
  }
  </code></pre>
  
  <p>if I set the height of the <code>.content</code> div to <code>400px</code> it does what I want but it is not a percentage (so on resize it doesn't change - i.e. when the width of the container is <code>200px</code> the content div's height should be <code>120px</code>).</p>