learn how containers work in css

I'm a programmer trying to do some patching up in web-design and generally find css very logical. So far, only 'boxing model' remains a magical land full of minotaurs and harpies for me. I'll illustrate it with examples:

• http://jsfiddle.net/qyMxv/
  The inner element of div with padding specified goes outside of div space. Isn't div supposed to enclose everything inside it? What's the point of doing otherwise?

• http://jsfiddle.net/wk9Kg/
  Parent div completely disappears, while children are shown normally. Even more strange that this behaviour is triggered by float:left;.

Is there any tutorial/reference book which could help me to see logic in these quirks? I trusted w3schools for some time but they're terribly brief on this subject. Finding good content on the web also turned out to be difficult. Right now I just fiddle with display, position and float properties until it works.

Thanks!