Layer within a layer problem

Im using DW8 to create some layers on a site im working on, but running into some issues. Basically I have a layer (absolute, centered) that contains the layout (inside tables) and some navigation buttons inside of another (relative) layer, but upon resizing the browser window, the navigation layer stays "fixed" instead of moving with the centered layout layer. Any ideas? thanks in advance

Website: http:// risingleaf.com/infront/infrontdemo.htm

<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

#layoutlayer {
	position:absolute;
	width:200px;
	height:115px;
	z-index:2;
	left: 50%;
	margin-left: -393px;
	top: 0px;
}
#navlayer {
	position:relative;
	left:117px;
	top:158px;
	width:144px;
	height:187px;
	z-index:3;
}
-->
</style>

Code (markup):

...

<div id="navlayer">
  <div><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','home_down.jpg',1)"><img src="home_up.jpg" alt="Home" name="Home" width="136" height="29" vspace="2" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('philosophy','','phil_down.jpg',1)"><img src="phil_up.jpg" alt="Philosophy" name="philosophy" width="136" height="29" vspace="2" border="0"><br>
    </a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Articles','','articles_down.jpg',1)"><img src="articles_up.jpg" alt="Articles" name="Articles" width="136" height="29" vspace="2" border="0"><br>
      </a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Services','','services_down.jpg',1)"><img src="services_up.jpg" alt="Services" name="Services" width="136" height="29" vspace="2" border="0"><br>
        </a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','contact_down.jpg',1)"><img src="contact_up.jpg" alt="Contact" name="contact" width="136" height="29" vspace="2" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','home_down.jpg',1)"><br>
          <br>
        </a></div>
</div>
<div id="layoutlayer">
  <table width="786" border="0" cellpadding="0" cellspacing="0" bgcolor="#818181">
    <!-- fwtable fwsrc="infrontcrop.png" fwbase="infrontcorp.jpg" fwstyle="Dreamweaver" fwdocid = "403832607" fwnested="1" -->
    <tr>
      <td width="786"><table align="center" bgcolor="#818181" border="0" cellpadding="0" cellspacing="0" width="786">
          <tr>
            <td><img name="infrontcorp_r1_c2" src="infrontcorp_r1_c2.jpg" width="786" height="119" border="0" alt="bg"></td>
          </tr>
          <tr>
            <td><img name="infrontcorp_r2_c2" src="infrontcorp_r2_c2.jpg" width="786" height="33" border="0" alt="bg"></td>
          </tr>
          <tr>
            <td><table bgcolor="#818181" border="0" cellpadding="0" cellspacing="0" width="786">
                <tr>
                  <td background="infrontcorp_r3_c2.jpg"><img src="infrontcorp_r3_c2.jpg" alt="bg" name="infrontcorp_r3_c2" width="161" height="576" border="0"></td>
                  <td background="infrontcorp_r3_c3.jpg"><img name="infrontcorp_r3_c3" src="infrontcorp_r3_c3.jpg" width="625" height="576" border="0" alt="bg"></td>
                </tr>
            </table></td>
          </tr>
      </table></td>
    </tr>
    <tr>
      <td bgcolor="#818181"><img src="spacer.gif" width="786" height="40" border="0" alt="bg"></td>
    </tr>
  </table>
</div>

Code (markup):

 

nevermind. im figured out that i needed to nest the div tags.

in any case, i love css.