[CSS] Box Model problems

[Tripredacus]

I am trying to recreate part of a website that uses tables and images but with DIVs and CSS instead. I am having a problem with the box model and frankly its not making sense to me. Here is a how it is supposed to look:

Thats the best I could draw it in ascii lol. Anyways one main div (blue backgroun). Inside it, another div (black background) so that it looks like a black box with a blue frame around it. No I can't use border for the black div either. The black div has another in it (float left) and on the right will be a flash object or some words or something.

The height of the blue box is 521px, the blue box inside is 450px. I tried either padding and margin-top of 20px and instead of shifting the black box, it shifts the blue (container) box down and the black one stays in the same place. Here's some code snippets. I am not entirely concerned with the file in the include, it displays properly. It is simply a <UL> grouping.

<div id="content">
  <div id="contentWrapper">
	<div id="indexLeft">
		<!--#include file="include/indexNav.asp"-->
	</div>
	Content
  </div>
</div>

#content {
	width:1001px;
	height:521px;
	margin-left:auto;
	margin-right:auto;
	border-left: 5px solid #365F97;
	border-right: 5px solid #365F97;
	background-color:#16365D;
	}

#content #contentWrapper {
	width:961px;
	height:450px;
	margin-top:20px;
	margin-left:20px;
	margin-right:20px;
	background-color:#000000;
	}

Why would margin-top on the wrapper move the parent div instead?

EDIT: reposted on DevShed as well:

http://forums.devshed.com/css-help-116/css...ems-668660.html