converting a static layout to % percentage layout using css

I have put together a simple static layout where I would lilke to understand how to convert the static widths into percentages in order to eventually create a responsive web layout. Can anyone recommend the easiest way to work out layout widths, font-sizes, paddin开发者_如何学Pythong and margins in percentages? I have been so used to creating my layouts in static format but I would love a complete understanding on how to implement this % technique.

Link to my simple layout is here: http://jsfiddle.net/9fH87/

All advice welcomed, Thanks Kyle

Replacing the fixed width of the two columns with 45%, you'll get a fluid layout, it means a layout that fit it self to the container.
You can find tons of examples with an easy search.

Honestly, percentages are a bad idea, because they correspond to how wide the viewport is all the time, if you resize the viewport closer together, all the words just squish together.

The best way to do it is to make a container div (name it body-container), give it whatever width you want, and center it using this code margin: 0 auto; then set the min-width of the body to something acceptable. 1080px is usually good since most people nowadays have a resolution at least 1080 wide.

Here is my example: http://jsbin.com/ufesif/2