Adding CSS border changes positioning in HTML5 webpage
===

I'm having a problem with the page elements moving when I add a border in a HTML 5 document.

I expected the containing header element (grey) to appear at the top of the screen, but it seems to take the margin from the inner div (red). However if I add a border to the header it appears where I expect and the red inner div only moves slightly!

(1st image: without border; 2nd image: with border)

![No border][1]![with border][2]


I have tried setting relative & absolute positioning, using a div instead of the header element, setting margins & padding etc. The HTML validates. This is the HTML stripped of everything and still doesn't work. Its happening in latest Chrome & FF.

HELP!! What have I missed?? Or any workarounds (other than keeping the border)?

**HTML:**

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Test</title>
    </head>
    <body>
    	<header><div id="mydiv"></div></header>
    	<div id="content"><p>hello</p></div>
    </body>
    </html>

**CSS:**

    header {background-color:#CCCCCC; width:960px; height:430px;}
    #mydiv {width:960px; height:320px; margin:80px 0px 0px 0px; background-color:#CC0000; }


  [1]: http://i.stack.imgur.com/BZv53.gif
  [2]: http://i.stack.imgur.com/ku7gU.gif