So how does it work ?
body is given a minimum height of 100%. This means ist at the minimum will get the height of it's direct parent (html), provided it is set explicitly. It can get longer should it need to do so (IE6 will stumble over this, but that's a problem for later)
This means html is given height:100% and since it's direct parent is the root element the height for html is as heigh as the viewport (so potentially it's shorter than body (no worries no browser renders it that way)
This means any vertical padding borders or margins on body are a problem as they would make it larger than the viewport. So the top and bottom borders go on the inside elements.
The left and right borders (if you want them) need to go on the body as it's the only element that's going to be the full length if your content doesn't get to be long enough (same goes for a background you need all the way down the page).
The width and auto margins on the body are to make it center.
The position:relative is not to nudge it about, but it is to make it gain "position": any child of it using absolute positioning will is the body as a reference instead of the viewport. This is important (remeber the min-height) as it's the element that gets to be at least as heigh as the viewport, but larger if needed.
The footer get abdolute positioning and gets put on the bottom.
Since absolutely positioned block shrink, we put it back to the full width of the body (width 100%) [think about this: why is it the width of the body ?]
The content needs to clear the footer in case the content is long enough to force scrolling, so make sure the footer has a known height and give the content enough padding to have enough stuff near it's bottom where no content will be as to allow the footer to overlap that area.
The 5px padding on the left and right of the paragraph in the footer and of the content are to make them stand away from the border. now a good exercise for the reader is to know why they were put here and not on the body or the footer (tip: try it, and remember that width you set is of the content.)
To see better where the content and the footer are, try addign somethign like:
If you are going to add floated content inside the content div, be careful that you make content stretch to encompass any floated content in might have. (clearfix or a simple <br /> that has clear:both comes to mind)
Once you get this right and fully understand it, we can take a look at the legacy Ie versions and see if they need help (at least IE6 will need help since we've used some things beyond it.