Make an website that always keeps its ratios

[typeman]

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.I've startedd with building a simple fixed width/height frame like this: http://jsfiddle.net/WxNrh/ and started playing around with it but I always get stuck.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.Here is my fixed website:\[code\]<div id="wrapper"><div id="header">Header</div><div id="content"> <div id="left">Left</div> <div id="right">Right</div></div><div id="footer">Footer</div>\[/code\]And css:\[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\]I would really appreciate any help! Edit:I got the desired effect with this css:\[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\]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.