I am starting to understand the problem with margins... They collapse between elements! That is, they are not added together in between elements, but the biggest one is used. See the following sample.
<div id='main' style='height: 200px; margin: 25px; background-color: yellow;'>dummy contents</div>
<div id='foot' style='height: 100px; margin: 50px; background-color: green;'>hello world</div>
Now, the margin between the two elements is not 25+50, but it's just 50...