Q:

Why is this div margin-top not working as expected?

I'm using Firefox 8.0.1

margin-top is not working as expected, can anyone help? thx. 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
     <head>
          <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
          <title>New Border</title>

          <style type="text/css">
               #page {
                    width:980px;
                    margin: 50px auto;
               }

               #board {
                    width:600px;
                    height:400px;
                    background-color: gray;
               }

               .cell {
                    border: 1px solid;
                    width:50px;
                    height:20px;
                    margin: 30px 5px;
               } 
          </style>
     </head>
     <body>
          <div id="page">
               <div id="board">
                    <div class="cell">
                    </div>
               </div>
          </div>
     </body>
</html>

So, margin-top in the cell div is not working as expected.

I thought it should be margin-left, to place the cell div under the board div, but it's not.

This is the screenshot:

A:

You can add
overflow:hidden;

or
border:1px solid rgba(0,0,0,0); /*or*/ border:1px solid transparent;

To #board css.
See http://jsfiddle.net/3QfWS/

