Css positioning help

1 
<style type="text/css">

body {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
background-color:#D9D9D9;
margin:0 auto;
}

#headerbackground {
background:url(headerb.png) repeat-x;
z-index:1;
}

#header {
height:330px;
background:url(header.png) no-repeat center ;
z-index:100;
}

#footer {
background:url(footer.png) no-repeat center ;
height:133px;
}

#main {
background:url(body.png) repeat-y center;

}



</style>

</head>

<body>


	<div id="headerbackground">
	
		<div id="header">		
		</div>
		
	</div>
	
	
			<div id="main">
			
                              <h1>CONTENT GOES HERE</h1><br>
                              asdasdasdasdasd
								
 			</div>
			
			
	<div id="footer">
	
	</div>
	

</body>
</html>

that’s my centerd fixed layout with css. what i am having trouble with
is placing the content in the “main” div. i just can’t get the text
where i want to. what kind of positioning should i use? i want the text
aligned to the left, but NOT to the left of the page, the left of the
content area (which is centered). and one more thing: on the header
image, i need to position a bit of text at an exact position (it needs
to correspond with and image that is the reflected text).

i kept messing around with different positioning types, but i just
can’t get it to work. either the graphics get messed up, or the text
gets messed when i resize the browser window. any help will be
appreciated.

thanks in advance