I have two layers ... The top layer needs to be centered ontop of the other layers. For some reason I cant get it working...

    <div id="content">This content needs to be centered in the page ... and sitting ONTOP of the other layer... Right now it is resting ABOVE other layers.... not ONTOP of the other layers.</div>

    <div id="pageback">
        <div id="top-blu"> The is the background upper portion of the page (which is a blue bar)</div>
        <div id="bot-wht"> The is the background lower portion of the page (Which is white)</div>
Here is the style sheet...

#content { position:relative; width:850px; margin:0 auto; z-index:100; }

#pageback 		{ position:relative; width:100%; height:100%; z-index:0; top:0; left:0; }
	#top-blu 	{ position:absolute; background-color:#00AFF0; width:100%; height:292px;  }
	#bot-wht 	{ position:absolute; background-color:#FFF;    width:100%; top:292px; }
Any ideas how to fix this?