CSS - posicion de 2 capas dentro de otra

Tengo una capa en el lateral izquierodo que quiero que contenga a otras dos. La primera de esas dos irá arriba, es decir con un top:0px; y la segunda debajo de esta con una separaciónn de 100 px entre ambas.

Como puedo hacer esto? Lo he probado de muchas formas pero la altura de la capa contenedora nunca es la correcta. La segunda capa, la que va debajo, siempre se sale.

Aquí va lo último que he probado

<div id="cLateral">
<div id="cZonas">
<table>
<tr>
<td>*<td>zonas
</tr>
<tr>
<td>*<td>Registro de cuenta bancária
</tr>
<tr>
<td>*<td>Visualizar los datos bancarios
</tr>
<tr>
<td>*<td>Alta proveedores
</tr>
</table>
</div>

<div id="cIconos">
<table border=1>
<tr>
<td>*<td>Iconos
</tr>
<tr>
<td>*<td>Registro de cuenta bancária
</tr>
<tr>
<td>*<td>Visualizar datos bancarios
</tr>
<tr>
<td>*<td>Alta proveedores
</tr>
</table>
</div>


</div>

Y aquí el CSS que le aplico:

#cLateral{
position:absolute;
left:0px;
top:60px;
width:200px;
height:auto;
background-color:#FFFFCC;
border-style:solid;
border-width:1px;
}
#cZonas{
position:relative;
top:0px;
left:0px;
width:100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
}
#cIconos{
position:relative;
top:100px;
left:0px;
width:100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
}