How to keep Content inside Image Map Area - image

Question

So here's what I'm working with: http://shaneboland.com/ms2/contact.html
but this is what I want: http://shaneboland.com/ms2/test.jpg
I have one div that contains my form:
<div id="wrapper">
<div id="content-pad">
<div id="mid-col-wide">
<form name="contactform" method="post" action="contact/send_form_email.php">
<table width="450px">
<tr>
<td valign="top">
<label for="first_name">Full Name *</label>
</td>
<td valign="top">
<input type="text" name="full_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="comments">Message *</label>
</td>
<td valign="top">
<textarea name="comments" maxlength="1000" cols="25" rows="6"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
</div><!-- //mid-col -->
</div><!-- //content-pad -->
</div><!-- //wrapper -->
and then I have a separate div that contains an image map with multiple links:
<div align="center">
<img name="emp" src="contact/main.jpg" usemap="#ep" alt="Mammal Swag" width="940" height="801" border="0"/>
<map name="ep">
<area shape="poly" coords="20,144,176,159,183,222,42,223,20,144" href="about.html" onMouseOver="changeabout()" onMouseOut="changemain()"/>
<area shape="poly" coords="49,228,184,228,192,289,118,315,36,265,49,228" href="index.html" onMouseOver="changecontact()" onMouseOut="changemain()"/>
<area shape="poly" coords="675,639,692,607,773,607,754,713,693,712,675,639" href="http://www.facebook.com/MammalSwag" onMouseOver="changefacebook()" onMouseOut="changemain()"/>
<area shape="poly" coords="185,159,370,149,320,243,199,285,185,159" href="index.html" onMouseOver="changehome()" onMouseOut="changemain()"/>
<area shape="poly" coords="821,536,877,626,766,694,779,606,821,536" href="http://www.twitter.com/MammalSwag" onMouseOver="changetwitter()" onMouseOut="changemain()"/>
</map>
</div>
I want to make it so that my contact form div, stays positioned inside that big green space. So when the window is resized, the contact form div, is still in the same spot INSIDE of the green space.
How do I make my contact form div resize with my image map?