un div debajo de otro

Hola a todos...
Mi problema es que quiero colocar un div independiente debajo de otro div que es el princiapl y que contine las secciones de encabezado, navegacion, contenido y pie de pagina, yo se que debe ser con z-index, pero lo he colocado por donde creo que es, pero no funciona..
aqui esta el codigo:

body {background-color:rgb(173,210,236);
}

#borde{/*este es el div que quiero que aparezca por debajo*/
margin:7px auto;
width:830px;
height:822px;
background-color:#CC0000;
}


#content {
background-color:#999999;
margin:10px auto;
width:810px;
height:auto;
position:relative;
}

#cabecera {
width: 810px;
height:120px;
background-color:#FFFFFF;
text-align:center;
vertical-align:middle;
}

#menuhorizontal{
width:810px;
height:18px;
float:left;
background-color:#FFFFFF;
border-bottom:1px solid #999999;
}


#principal{/este contiene a los divs navegacion,contenido y mas*/
width:810px;
height:auto;
overflow:hidden;
}

#navegacion {
width:185px;
height:630px;
float:left;
background-color:#FFFFFF;
margin-right:1px;
}

#contenido {
width:454px;
height:630px;
float:left;
background-color:#FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#333333;
text-align:center;
}

#mas {
width:169px;
height:630px;
float:left;
background-color:#FFFFFF;
margin-left:1px;
text-align:center;
}

#pie {
clear:both;
width:810px;
height:51px;
background-color:#FFFFFF;
border-top:1px solid #999999;
font-weight:bold;
color:#666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}

maestro apr empezar si deseas que un div solape otro no solo basta con z-index (el cual no veo donde los pusiste), tambiende debes de establecer la porpiedad, position como absolute

par el que debe estar encima

Código :

 #div_superior {
position:absolute;
top:0px;
left:0px;
z-index:10;
}

#div_inferior{
position:abasolute;
top:0px;
left:0px;
z-index:5;
}

COPY, PASTE PLAY AND ENJOY