what causes the margin top to not show?

Try to add some clearer:

<div id="main">
  <div id="left"></div>
  <div id="right"></div>
  <div style="clear:both"></div>
  <div id="footer"></div>
</div>

When an element's css clear set to both, it won't let ANY FLOATING element to overlap in its border and text area, meaning margin can be overlapped by float elements. That is why you cannot see your footer's margin. So we basically need an extra div, which is not floated, so the margin of your footer has something to push. Try my codes below (with BG and Borders), you'll see what I'm saying.

Without extra div:

<div id="main">
  <div id="left" style="background:#FF000;border:solid 1px #000000;float:left">LEFT</div>
  <div id="right" style="background:#00FF00;border:solid 1px #000000;float:right">RIGHT</div>
  <div id="footer" style="clear:both;margin-top:10px;background:#00FFFF;border:solid 1px #000000;">FOOTER</div>
</div>

With extra div:

<div id="main">
  <div id="left" style="background:#FF000;border:solid 1px #000000;float:left">LEFT</div>
  <div id="right" style="background:#00FF00;border:solid 1px #000000;float:right">RIGHT</div>
  <div style="background:#0000FF;border:solid 1px #000000;clear:both">CLEARER</div>
  <div id="footer" style="margin-top:10px;background:#00FFFF;border:solid 1px #000000;">FOOTER</div>
</div>

Resource:

http://www.w3.org/TR/CSS2/visuren.html#flow-control