Here you can see the #clearfooter div, which is there in case the screen is small, and the #date and #footer divs without the margin-top. (You'll have to scroll down to see them as they're below the #wrap div, which, as you know is a min-height of 100%).
When you give the #date div the negative margin-top, it moves up to sit on top of the content - if the screen is not very big, it may sit in the space saved by that #clearfooter div.
Notice how the #footer div moves up with it - that's naural as we're not using positioning here - just margins. Then when you give the #footer the negative margin-top, it does the same thing - it moves up to overlap what is above it.
