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:

'more info' link clicked:

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">

	<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>


	<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 id="page-wrap">

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

	<div id="output-listings">
		<div class="main-info"> 
<table class="listings"> 
  <tr id="more-info-1" class="mi-1"> 
          <div class="more-information-1"></div> 
  <tr id="main-info-1"> 
          <td>Leftlane News</td> 
          <td><a id="link-1" class="more-info-link" href="#">More info</a></td> 
  <tr id="more-info-2" class="mi-2"> 
          <div class="more-information-2"></div> 
  <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 id="more-info-3" class="mi-3"> 
          <div class="more-information-3"></div> 
  <tr id="main-info-3"> 
          <td><a id="link-3" class="more-info-link" href="#">More info</a></td> 

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

	<div class="clear"></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 id="ft-bottom"></div>
<div id="text-footer"><p>Copyright &copy; 2009 . All rights reserved.</p></div>



Anyone know whats going on?