If you set the <body> element to have font-size: 100% then you are effectively setting the pixel size base line to be 16px.
So now 1em equals 16px.
To size either our text or our layouts to match what the designer has specified in pixels we use the following calculation:
target / context = result
This means if your target font size for a <h1> is 24px and your ‘context’ (the container) is 16px then you calculate this as:
24 / 16 = 1.5
So you set your font size to 1.5em.
Same for a layout. If the designer has made the website 960px wide and has an element within it that is 900px wide.
First thing to do is to set the 960px width to be a percentage. Well we have to just take a guess on this I’m afraid so we’ll choose 90%.
But thankfully to turn 900px into a percentage we can use the previous calculation of target / context = result again:
900 / 960 = .9375
But now (as you’re using percentages for your layout) you move the decimal over two places: 93.75%