strange margin problem in addition to element's height
I have a very strange problem.I Suppose this is something simple that i have never learnt.
Here is the html http://pastebin.com/NfHRqvUp
and this is the css http://pastebin.com/TMitgN0H
Open the page and inspect body element with firebug or whatever dev tools you are using.
My problem can be described by this image http://s16.postimg.org/tojsotb79/cssmargin3.jpg
I suppose it has to do with how margins are calculated related to parent elements.
I tried to understand this behavior through http://www.w3.org/TR/CSS2/box.html#margin-properties but i didn't.
So any advice on what to read or why this happens would be appreciated.