title: Ratio dependent elements in fluid layout
body: <p>I'm working on a design for mobile devices similar to this one: <a href="http://jsfiddle.net/rdCdx/" rel="nofollow">http://jsfiddle.net/rdCdx/</a></p>
  
  <p>I need to meet these requirements:</p>
  
  <ul>
  <li>[edit] fit the image on the left to match the height of the space between top-menu and bottom-menu</li>
  <li>preserve the aspect ratio of the image on the left.</li>
  <li>have the <code>#products-list</code> div occupy the rest of the <code>#content</code>'s width (right now I've hard coded a value there, this isn't fluid and this won't work on different devices)</li>
  <li>have the <code>.button</code> float right and occupy a percentage(say 10%) of the <code>.product</code>'s width</li>
  </ul>
  
  <p>How can this be accomplished?</p>
  
  <p><strong>Edit:</strong> The point where I am stuck is that I cannot think of a way to make the element on the right, namely the <code>#products-list</code> element, to have a width equal to the width of the screen minus the width of the image.</p>
  
  <pre><code>what have you tried?
  </code></pre>
  
  <p>I can't think of any good way to make progress towards my requirements given the knowledge that I have. Also, I haven't seen something like this done anywhere else.</p>