You obviously missed the section on 100% height as you can't just set elements to scale to 100%.
margin: 0 auto;
[B] /*min-height: 100%; can't use that here as there is nothing for it to work with*/[/B]
overflow: auto; /*don't know what this does! - [B] it contains floats[/B]*/
padding-bottom: 100px; /*set some padding on the bottom in order to get the footer on screen without going over the top of the content*/
The min-height:100% has nothing to base its height on as it can only base its height on a parent with a defined height. It doesn't work if the parent is height:auto or based on content height or has a min-height in percentages). Indeed if it did work as you had it then that content section would be 100% high from where it starts and travel far below the bottom of the fold thus breaking the rest of the layout.
Suffice to say you can't just say to an element start here and go to the bottom automatically
100% height can only be achieved on the main container and not on inner elements. It's a once only effect and everything has to be accomplished form the start by being creative or planning carefully.
The footer method you are using will be broken in a number of browsers anyway so I suggest you use the method in the css faq as it works everywhere.
If you want a full width header and footer but a centred container then you are going to need something more complex like this. It uses an image for the left equal column but you can remove that if you just want a solid coloured background. The ony downside of this method is that both the footer and header must have a known height so that you can make the right calculations with the negative margin on the wrapper.