relative positioned layer problem

The site is http://www.evocreative.com/easternbabes/
I have set the layer #nav to relative positioning and placed mark up <div id="nav"></div> right after the main content div. I wanted it to render relative to the top left corner of this div. I can't understand why it is rendering above it. Anyone know what I am doing wrong? Obviously I am not understanding something pretty basic.

CSS:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

#wrapper {
font-family: Arial, Helvetica, sans-serif;
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#content {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
height: auto;
width: 800px;
}
#top {
margin: 0px;
height: 265px;
width: 100%;
}
#top #header {
height: 64px;
border-top-color: #D30D0F;
border-bottom-color: #D30D0F;
border-top-style: solid;
border-bottom-style: solid;
border-bottom-width: 2px;
border-top-width: 2px;
background-image: url(images/logo.jpg);
}
#tagline {
background-color: #D30D0F;
float: left;
height: 36px;
width: 600px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFFFFF;
padding-left: 200px;
}
#bottom {
margin: 0px;
padding: 0px;
float: left;
height: auto;
width: 100%;
}
#bottom #left {
float: left;
height: auto;
width: 183px;
padding-left: 11px;
}
#bottom #right {
width: 606px;
margin-left: 194px;
}
#right #topbabes {
float: left;
height: 260px;
width: 95%;
padding-top: 11px;
padding-left: 25px;
}
.bigbabes {
float: left;
height: auto;
width: auto;
margin-right: 45px;
}
.bigbabename {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
color: #8A8C8D;
text-align: center;
padding-top: 5px;
}
.bigbabesright {

float: left;
height: auto;
width: auto;
margin-right: 0px;
}
#homethumbs {
background-color: #F2F2F2;
float: left;
height: 235px;
width: 575px;
padding-left: 25px;
}
.homethumb img {
border: 1px solid #CE0C0C;
}
#homethumbs .homethumb {
float: left;
width: 50px;
margin-right: 33px;
margin-top: 10px;
}
.thumbtext {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #666666;
text-align: center;`
padding-top: 5px;
line-height: 9pt;
}
#homethumbs .homethumblast {
float: left;
width: 50px;
margin-top: 10px;
}
#signup {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #D30D0F;
background-color: #E3E3E3;
height: 170px;
width: 167px;
}
#nav {
left:5px;
width:178px;
height:335px;
z-index:1;
background-image: url(images/nav_back.png);
background-repeat: no-repeat;
position: relative;
}

So I should close the nav div at the end of the page or put it somewhere else? If so then where?

Overall layout is up to you but...

Wrapper goes around everything else.

I would think you need to open and close your header then.

Now comes your nav, probably floated left rather than using absolute positioning.

Now the content should tak up space to the right of the nav div.

Foter if you have one should be the last main div to open and close inside the wrapper.