I designed a layout using Layers. Everything looks fine on my local machine but when I upload the files to the server, below problems occure...

1- Main DIV "wrapper" moves to the left of the page, while on my local machine it looks at the center of the page & remain in the center while I resize the browser window. Whats the problem, why does it change its position on server?

2- "Pro" DIV also changes its position. Currently I've give a top value in -ve digits. How can I control its position?

I'm giving the Code of both HTML & CSS. Please guide me where is the problem & how can I fix it?

CSS:
Code:
HTML, BODY {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: ;
	background-image: url(images/pbg.jpg);
	margin: 5px 0px;
}

#wrapper {
	margin: 0px auto;
	width: 779px;
	height: 758px;
	text-align: left;
	background: url(images/cntbg.jpg);
	color: #FFFFFF;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

#who {
	position: relative;
	top: 140px;
	left: 180px;
	width: 270px;
	text-align: justify;
	line-height: 16px;
	color: #FFFFFF;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

#exp {
	position: relative;
	top: 190px;
	left: 180px;
	width: 270px;
	text-align: justify;
	line-height: 16px;
	color: #FFFFFF;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

#pro {
	position: relative;
	top: -37px;
	left: 490px;
	width: 270px;
	text-align: justify;
	line-height: 16px;
	color: #FFFFFF;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

STRONG {
	font-size: 14px;
	color: #009900;
}

TD {
	padding: 2px;
	color: #FFFFFF;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

TD.pad2 {
	padding: 10px 2px 2px 2px;
}

.yel {
	color: #FFFF00;
	font-weight: bold;
}

A:link {
	color: #99FF66;
	text-decoration: none;
	border-bottom: 1px dashed #99FF66;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
A:visited {
	color: #99FF66;
	text-decoration: none;
	border-bottom: 1px dashed #99FF66;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
A:hover {
	color: #99FF66;
	text-decoration: none;
	border-bottom: 1px solid #99FF66;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
HTML:
Code:
<body>
<div id="wrapper" align="center">
<div id="who">
<strong>Something</strong><br />
kjhdfkgh kjhgfkfdhgkjgfdkjfdgjdg djfhgk djhgfkdjjkdg kjhdgk hkjfdkjfdgkjfdkjfkjfj jfjfkdjhgjfjfjjfjfdkj dgjhdd kjg dkd</div>
<div id="exp">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2"><strong>Something</strong></td>
	  </tr>
	<tr>
		<td width="80%" class="yel">dgdgdfg</td><td class="yel">dfgdfgdfg</td>
	</tr>
	<tr>
		<td width="70%">Link</td>
		<td>A+</td>
	</tr>
	<tr>
		<td width="70%">Link</td>
		<td>A+</td>
	</tr>
	<tr>
		<td width="70%">Link</td>
		<td>B</td>
	</tr>
	<tr>
		<td width="70%">Link</td>
		<td>A+</td>
	</tr>
	<tr>
		<td width="70%">Link</td>
		<td>B</td>
	</tr>
	<tr>
		<td colspan="2" class="pad2 yel">Link</td>
	</tr>
	<tr>
		<td width="70%">Link</td>
		<td>A+</td>
	</tr>
	<tr>
		<td width="70%">Link</td>
		<td>A+</td>
	</tr>
	<tr>
		<td width="70%">Link</td>
		<td>A+</td>
	</tr>
</table>
</div>
<div id="pro">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
	<tr>
		<td><strong>Projects on my credit...</strong></td>
	  </tr>
	<tr>
		<td>Link</td>
	</tr>
	<tr>
		<td>Link</td>
	  </tr>
	<tr>
		<td>Link</td>
	  </tr>
	<tr>
		<td>Link</td>
	  </tr>
	<tr>
		<td>Link</td>
	  </tr>
	<tr>
		<td>Link</td>
	  </tr>
	<tr>
		<td>Link</td>
	  </tr>
</table>
</div>
</div>
</body>