div with dynamic elements pushing other div down

Question

So, I have a predicament. My tabs are pushing down the content below it. Here is some of the code:

<div id="navigation">
    <div id="test" class="blue">
 <p><a href="<? echo $web_app_path ?>home.php">Home</a></p>
<p class="subtext">View/update contact information</p>
    </div>
    <div id="lessons" class="blue">
 <p><a href="<? echo $web_app_path ?>projects.php">Projects</a></p>
<p class="subtext">Create/open projects, view existing reports</p>
    </div>
 <div id="test" class="blue">
 <p><a href="<? echo $web_app_path ?>help.php">Help</a></p>
<p class="subtext">If something doesn't work, click here</p>
    </div>
</div>

 <div id="contain3">
  <table id="maintable" align="center" width="940" cellspacing="0" cellpadding="0" class="lessontablemain">
<tr align="center" valign="top">
<td height="500" cellpadding="0" cellspacing="0">
<!--<div id="maincontent">-->
<table align="left" cellspacing="4" cellpadding="4" style=" margin-top:10px; background-color:transparent; border: 0;" width="100%" class="textfont_charms">
                <tr>
                    <td cellspacing="0" cellpadding="0" align="center"  valign="top">
   <br>
   <!--template up-->
   <!--side bar table below -->
    <? include_once("sidebar.php"); ?>
    </td>
    <td cellspacing="0" cellpadding="0" width="100%" valign="top" align="center">
    <table id="maintable" style=" margin-top:10px; background-color:transparent; border: 0;" cellspacing="0" cellpadding="0" height="100%" valign="top" width="100%">
    <tr>
    <td valign="top" align="center" width="100%" cellspacing="0" cellpadding="0" height="100%">
    <div align="center" id="content" style="vertical-align: top;"></div>        
    </td>
    </tr>

   </table>
   <!--template down-->
   </div>
</td>
</tr>
</table>
</tr>
<tr valign="bottom">
<td style="background-color: #E2E2E2;">
<?

 include('template/footer_tmpl.php');
 ?>  

</td>
</tr>
</table>
</div>

Here is my css:

#contain3{
width:940px;
margin-left:auto;
margin-right:auto;
text-align:left;
/*position: absolute;*/
top: 137;
z-index: -1;
    }

#navigation{
width:940px;
margin-left: 8px;
text-align:left;
font-family:"Lucida Grande","Lucida Sans",sans-serif;  
font-size:12px;
top: 109;
/*position: absolute;*/
z-index: 2;
}

To see what I'm talking about, my site is: http://www.charmscorp.com/inspect/projects.php - click on the tabs up above. Don't mind the slowness of the site, it's a server issue... so you have to wait a few seconds for the tabs to initialize.

Also, as you can see, I commented out position absolute. I thought that would be the answer, but instead, it just put the tab div on top of the content... Please help, this is giving me a headache!

Answer 1

Instead of making the divs with class "blue" higher - and thus revealing the drop down - why don't you show() the paragraphs with class "subtext" themselves instead?

Have them set to display: none by default, and use JavaScript to reveal them. You'll need to set them to position: absolute also, so they don't push any content down.

Answer 2

ok, I fixed this. I made the position: absolute, and then margin-top:27px, which pushed the content div down to where I wanted it to be. Another problem arose though, which is IE related. I'll start a new thread for that one though, as it's a new problem. Thanks!