As an alternative to floating and margins to get the column layout I want, I began fooling around with absolute and realtive positions. However, that seems to disable the anchor (a href="") links.

Here's the XHTML excerpt
Code:
<body>
<p><a href="rates.html">rate sheet</a></p>  <!-- this link works -->
	<div id="wrapper">
(snip)
		<div id="nav">
			<div id="menu">
				<ul>
					<li>HOME</li>
(snip)
					<li><a href="rates.html" name="rates" title="rates for standard services">rate sheet</a></li>
<!-- the above link does not work -->
Here's the CSS excerpt

Code:
<!--
/* centering the wrapper in the screen */
		body {
			margin: 0px;
			padding:0px;
			text-align:center;
			background-color: rgb(245, 200, 156);
			color: rgb(138, 69, 0);
		}
		
		#wrapper {
			position: relative;
			top: 0px;
			left: 0px;
			width:800px;
			height: 600px;
			background-color:rgb(255, 217, 179);
			z-index: -1;
			margin: 0 auto;
			text-align:left;
			padding:0;
		}
		#nav {
			position: absolute;
			top: 0px;
			left: 76px;
			width: 125px;
			height: 600px;
			background-color:rgb(202, 101, 0);
			color: rgb(255, 186, 117);
			font-weight: bold;
			z-index: -1;
			padding:0;
		}
		#menu {
			position: absolute;
			top: 275px;
			left: -12px;
			height: 365px;
		}
		#menu a{
			color: rgb(255, 186, 117);
		}
		#menu ul {
			list-style: none;
		}
What references I read in this forum and others says something about the anchor itself being positioned. Very confusing.