Well to achieve the exact layout you should do the following:
CSS:
#header
{ margin:0px auto;
height:200px;
width:1000px;
border:2px black solid;
}
#nav
{
margin:0 auto;
width:1000px;
height:50px;
border:2px solid black;
}
#content
{
margin:0 auto;
height:800px;
width:1000px;
border:2px solid black;
}
#footer
{
margin:0 auto;
height:200px;
width:1000px;
border:2px solid black;
}
Html:
<body>
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
Some things to go with:
1. Close every tag you open in html
2. Keep the layout simple ie. you wanted content after header and nav but you were placing them before.
3. I didnt do anything except rearranging them and resetting the CSS width property from Inherited to 1000px
4. You can change your width and height accordingly :)
Feel free to ask any questions :)