I'm trying to build a simple website that opens pages using MultiBox on 4 central images.

For some reason when I use margin:auto; to centre my design the page responds by infinitely scrolling space underneath when the user re-sizes the browser window.

Is there a simple work around for this? Or something I'm doing that I shouldn't be? I've tried this on many different designs and get the same weird scrolling. I've pasted my code below.

I'm aware my Java stuff might not be in order, I haven't finished implementing that yet. This isn't the issue though I think, as no Java seems to have the same effect.

Find the website uploaded here

THIS IS A VERY ROUGH SKETCH UP! PLEASE DONT JUDGE ME ON THIS :P

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Razmika Dance</title>

<link href="../css/multibox.css" rel="stylesheet" type="text/css" /> 
<!--[if lte IE 6]><link rel="stylesheet" href="../css/ie6.css" type="text/css" media="all" /><![endif]--> 

<script type="text/javascript" src="../js/mootools.js"></script> 
<script type="text/javascript" src="../js/overlay.js"></script> 
<script type="text/javascript" src="../js/multibox.js"></script>

<script type="text/javascript"> 
window.addEvent('domready', function() {
    //preloader
    var preLoadArray = new Array();
    var preLoadNum = 0;

    // Rollover script
    $$('img.roll', 'input.roll').each(function(el){
        // Preloader
        preLoadArray[preLoadNum] = new Image();
        preLoadArray[preLoadNum].src = el.src.replace(el.src.replace('_off.', '_on.'));
        preLoadNum++;

        el.addEvent('mouseover',function(){
            this.setAttribute('src',this.src.replace('_off.', '_on.'));
        });

        el.addEvent('mouseout',function(){
            this.setAttribute('src',this.src.replace('_on.','_off.'));
        });
    });
});
</script>
  
<style type="text/css">
body
	{
	background: #33F;
	}
#header
	{
	margin: auto;
	width: 451px;
	height: 150px;
	margin-top: 4%;
	background-image:url(img/header.png);
	background-repeat: no-repeat;
	}
#bound
	{
	margin: auto;
	width: 800px;
	}
#content 
	{
	background: #FC3;
	width: 436px;
	margin: auto;
	padding-bottom: 12px;
	padding-right: 10px;
	border-style: solid;
	border-color: #F30;
	border-top: none;
	}
#table
	{
	margin-left: 15px; 
	background: #F30;
	border: solid;
	border-color:#F30;
	width: 400;
	height: 400;
	}
#about
	{
	height: 200px;
	width: 200px;
	}
#gallery 
	{
	height: 200px;
	width: 200px;
	}
#workshops	
	{
	height: 200px;
	width: 200px;
	}
#contact
	{
	height: 200px;
	width: 200px;
	}
</style>

<body>

<div id="header">
</div>

<div id="bound">
<div id="content">
<table id="table">
  <tr>
    <td>	
    	<div id="about">
			<a href="../about.htm" rel="width:500 ,height:500" id="mb1" title="iFrame" title="About Razmika Dance"><img src="../img/about.jpg" alt="Gallery" border="0" class="roll"/></a>
    	</div>
    </td>
    <td>
    	<div id="gallery">
			<a href="../gallery.htm" rel="width:400,height:300" id="mb2" title="iFrame" title="Gallery"><img src="../img/gallery.jpg" alt="Gallery" border="0" class="roll"/></a>
    	</div>
    </td>
  </tr>
  <tr>
    <td>
    	<div id="workshops">
			<a href="../workshops.htm" rel="width:400,height:300" id="mb3" title="iFrame" title="Workshops"><img src="../img/workshops.jpg" alt="Workshops" border="0" class="roll"/></a>
    	</div> 
    </td>
    <td>
    	<div id="contact">
			<a href="../contact.htm" rel="width:400,height:300" id="mb4" title="iFrame" title="Contact Me!"><img src="../img/contact.jpg" alt="Contact information" border="0" class="roll"/></a>
   	    </div>
    </td>
  </tr>
</table>
<script type="text/javascript"> 
		var box = {};
			window.addEvent('domready', function(){
			box = new MultiBox('mb', {descClassName: 'multiBoxDesc', useOverlay: true});
			});
</script>
</div>
</div>
</body>

</html>