div с динамическими элементами, толкающими другой div вниз

Question

Итак, у меня есть затруднение. Мои вкладки толкают содержимое под ним. Вот часть кода:

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

Вот мой 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;
}

Чтобы понять, о чем я говорю, мой сайт: http://www.charmscorp.com/inspect/projects.php - нажмите на вкладки вверху. Не обращайте внимания на медлительность сайта, это проблема с сервером ... поэтому вам нужно подождать несколько секунд, чтобы инициализация вкладок.

Также, как видите, я закомментировал абсолютную позицию. Я подумал, что это будет ответом, но вместо этого просто поместил вкладку div поверх содержимого ... Пожалуйста, помогите, это вызывает у меня головную боль!

Answer 1

Вместо того, чтобы делать div с классом "blue" выше - и таким образом раскрывать раскрывающийся список - почему бы вам не показать () абзацы с самим классом "subtext" вместо этого?

Настройте их на отображение: по умолчанию нет, и используйте JavaScript для их отображения. Вам нужно установить их в положение: также абсолютное, чтобы они не давили на контент.

Answer 2

хорошо, я исправил это. Я установил позицию: absolute, а затем margin-top: 27px, что подтолкнуло содержимое div туда, где я хотел. Однако возникла еще одна проблема, связанная с IE. Я начну новую тему для этого, поскольку это новая проблема. Спасибо!