First off here is the link to the page I'm making for fun:
http://www.jcathcart.com/layout1/index.html

Now the problem I'm having can be seen when you click the Roster link. It is a div with a margin-top of 150px and for some reason it pushes the navigation div down equally. I have no idea why or how to fix it even after hours and hours of looking. Maybe CSS just can't do it? Anyway here is my css code:

body {
font-family:Trebuchet MS;
background:#000 url(bg.jpg) no-repeat center top;
color:#FFF;
text-align:center;
}

#container {
margin:0 auto;
width:900px;
}

#masthead {
height:538px;
}

#nav {
width:900px;
}

#close {
float:right;
}

#content {
margin:150px auto;
padding:5px;
text-align:left;
width:500px;
height:300px;
background:url(transparent.png);
border:1px solid #666;
}

Maybe CSS just can't do it?

Sure it can, it's a matter of HOW it's coded.

What browser are you seeing this in because I'm not seeing a problem in Firefox.

i don't see this happening either..