Container moving with main div

HTML & CSS
1

Hey All, Hope I explain this right.

When I try to move the main div (the solid outlined part) the container div (dotted line part) moves with it. I am trying to get the main to be in the middle of the container but when I try to edit just the main div, the container div also drops down. I know its probably something simple I am over looking but I have been at it for a while now.

Heres the page.

http://wolphewebdesign.com/Clients/Inspection/

HTML

<body bgcolor="#e8dec3">


<div id="container">
<div class="main">


</div><!--Closes main-->


</div><!--Closes container-->

</body>

CSS

#container {
	width:991px;
	height:595px;
	background-image:url(images/bg_03.png);
	margin: 0 auto;
	outline:#000 dotted thick;
	}
	

	
.main {
	background-image: url(images/mid_03.png);
	width:900px;
	height:445px;
	margin-left:45px;
	margin-top:130px;
	}

Thanks

2

I assume you mean you want to vertically center the inner div. The problem you are having is with margin collapse, where the top margin of the inner div hangs out of the container.

One way to stop this collapse would be to put an invisible top border on the container. E.g.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
<style media="all">
body {background: #e8dec3}

#container {
	width:991px;
	height:595px;
	background-image:url(images/bg_03.png);
	margin: 0 auto;
	outline:#000 dotted thick;
	[COLOR="#FF0000"]border-top: 1px solid #e8dec3;[/COLOR]
}
	
.main {
	background-image: url(images/mid_03.png);
	width:900px;
	height:445px;
	margin-left:45px;
	margin-top:130px;
}
</style>
	
</head>
<body>

<div id="container">
    <div class="main">
    </div><!--Closes main-->
</div><!--Closes container-->

</body>
</html>
3

After you get control of the containers, here are a few more items that you may be interested in:


div#topR has a  height:125px  that is not needed and can be deleted.

p.header needs  margin:20px 0 0;  (the margin-top positions it down from the top of the box and the bottom needs the 0)

div#menu has a  margin-bottom:25px  that should be deleted.

#menu ul  could use some margin and padding treatment:
          padding:0;         (lists have default padding-left and default vertical margins.)
          margin:10px 0 0;   (the margin-top positions it down from the bottom of the paragraph)

#menu ul li  could use some margin treatment, too:
          margin:0 7px;      (balances/centers the list beneath the paragraph; it's a few px offset right now.)

Cheers.