#main {

margin:20px 10px 10px 2px;

<tr>

<td valign="top" align="left">

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td valign="top">

<div class="faqText">

<div onClick="expandcontent(this, 'q1')" class="faqQuestion"><span class="showstate"></span><img src="/images/clr_spcr.gif" width="4" height="1" border="0">My order has shipped but I still can't track it. How can I find out where it is?</div>

<div id="topquestions01" class="switchcontent">Tracking information may not be available for the first 24 to 48 hours after you receive your shipping confirmation email.<br><br></div>

</div>

</td>

</tr>

</table>

</td>

</tr>

</div><!-- close #main -->

It's because divs, by default, don't trigger "layout".  They aren't intended to contain anything unless we tell them to.  In contrast, tables always trigger layout.  i.e., divs react to their context, while tables react to their content.

Add    position: absolute;    to your #main style.

See here for more information on the topic.

If you didn't have the tables, the problem might go away: 

    <div id="main">
       <div>Top Questions
        </div>
        <div class="faqText">
          <div onClick="expandcontent(this, 'q1')" class="faqQuestion">
            <span class="showstate">
            </span>
            <img src="/images/clr_spcr.gif" width="4" height="1" border="0">My order has...
          </div>
          <div id="topquestions01" class="switchcontent">Tracking information may not be...<br><br>
          </div>
       </div>
    </div><!-- close #main -->

 If you need to keep the tables, an alternative to position: absolute (which can be tricky) is to add:

<div style="clear:both"></div>

by positioning absolute the issue is resolved

thanks

Adam