Why does putting a margin on one div move its container?

I've a container div which has another div inside it. When I apply a margin to the inner div it appears to a margin-top to the container div (although it开发者_Go百科 doesn't give a left margin)

http://belfastswimmingteacher.com/mockup.html

What's the craic?

You can either float the halfLeft div, or add padding-top to #content.

This is known as margin collapsing, and whilst may produce this unwanted behaviour, is in fact intended and correct.