title: Make a website that always keeps its ratios
body: <p>I have been trying to build a website that always keeps its ratios and adapts to user screen size but i can't achieve that.</p>
  
  <p>I've startedd with building a simple fixed width/height frame like this: <a href="http://jsfiddle.net/WxNrh/" rel="nofollow">http://jsfiddle.net/WxNrh/</a> and started playing around with it but I always get stuck.</p>
  
  <p>What I want to achieve is that the max-width would be 800px and depending on the user screen resolution (or how much I shrink my browser window) the website would shrink accordingly but always keep its width/height ratios.</p>
  
  <p>Here is my fixed website:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  &lt;div id="header"&gt;Header&lt;/div&gt;
  
  &lt;div id="content"&gt;
      &lt;div id="left"&gt;Left&lt;/div&gt;
      &lt;div id="right"&gt;Right&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="footer"&gt;Footer&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And css:</p>
  
  <pre><code>#wrapper{width: 800px; height: 400px;}
  #header{background-color: red; width: 800px; height: 100px;}
  #left{float: left; background-color: yellow; width: 200px; height: 200px;}
  #right{float: left; background-color: orange; width: 600px; height: 200px;}
  #footer{clear: both; background-color: blue; width: 800px; height: 100px;}
  </code></pre>
  
  <p>I would really appreciate any help! :)</p>
  
  <p>Edit:</p>
  
  <p>I got the desired effect with this css:</p>
  
  <pre><code>#wrapper{max-width: 800px;}
  #header{background-color: red; width: 100%; padding-top: 12.50%;}
  #left{float: left; background-color: yellow; width: 25%; padding-top: 25.00%;}
  #right{float: left; background-color: orange; width: 75%; padding-top: 25.00%;}
  #footer{clear: both; background-color: blue; width: 100%; padding-top: 12.50%;}
  </code></pre>
  
  <p>But the problem is it works by using padding which forces my div content down which means it's not very usable - due to content not being where it supposed to be.</p>