Hey, I seem to be having a problem with my table when I load in more information with Jquery.

When I click the 'more info' link more content slides down but unfortunately seems to expand the table right or something.

Here are a couple of pictures of the page to explain better:

page normal state:
http://i645.photobucket.com/albums/u...1/Picture4.png

'more info' link clicked:
http://i645.photobucket.com/albums/u...1/Picture1.png

And here is the page source:
HTML 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>Title Here</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="listing.js"></script>

</head>

<body>
	<div id="login-nav">
		<a href="login.php">Please Login!</a>	</div>
    <div id="top-nav">
	<a href="index.php">Home</a>
        <a href="buy.php">Sites</a>
        <a href="register.php">Sign-Up</a>
        <a href="login.php">Login</a>
        <a href="myac.php">My Account</a>
    </div>

<div id="page-wrap">

<div id="curve-container"></div>
<div id="main-content">
	<div id="article-area">

		<h1>Sites</h1>
	<div id="output-listings">
		<div class="main-info"> 
<table class="listings"> 
<tbody> 
  <tr id="more-info-1" class="mi-1"> 
  <td> 
          <div class="more-information-1"></div> 
  </td> 
  </tr> 
  <tr id="main-info-1"> 
          <td>Leftlane News</td> 
          <td>www.leftlanenews.com/</td> 
          <td><a id="link-1" class="more-info-link" href="#">More info</a></td> 
  </tr> 
  <tr id="more-info-2" class="mi-2"> 
  <td> 
          <div class="more-information-2"></div> 
  </td> 
  </tr> 
  <tr id="main-info-2"> 
          <td>Motor Authority</td> 
          <td>www.motorauthority.com/ </td> 
          <td><a id="link-2" class="more-info-link" href="#">More info</a></td> 
  </tr> 
  <tr id="more-info-3" class="mi-3"> 
  <td> 
          <div class="more-information-3"></div> 
  </td> 
  </tr> 
  <tr id="main-info-3"> 
          <td>Autoblog</td> 
          <td>http://www.autoblog.com/</td> 
          <td><a id="link-3" class="more-info-link" href="#">More info</a></td> 
  </tr> 

</tbody> 
</table> 
</div> 
	</div><!--end output-listings-->

	</div>
	<div class="clear"></div>
 </div>
<div id="footer"></div>

<div id="curve-container"></div>
<div id="features">
	<div id="p-header">

		<h1>Header Here</h1>
		<p>Text Here.</p>
	</div>
 </div>
<div id="ft-bottom"></div>
<div id="text-footer"><p>Copyright &copy; 2009 . All rights reserved.</p></div>

</div>

</body>

</html>
Anyone know whats going on?