Poner un div, encima de otro , dentro de otro div.

[Edig]

Hola a todos,

Bueno, lo que quiero hacer es muy complejo y no se si se pueda hacer. Realmente espero que si xD

Quiero poner una div, encima de otro y estos dos dentro de otro div.

Todo perfecto, solamente que los div tendran color como si fueran un contador de algo y mostraran el % de algo... el ultimo div [primero que se ve xD] tendra un color supongamos con un 40%, el 2do tendra un color mas clarito y tendra un 49% el 3ero tendra un borde y un 100%

esta asi

100{
49%{
40%
}
}

ok?

el problema es que sale asi:

1-.
el de 100 y luego los otros, uno despues del otro, en fila para abajo.

2-. el 49% lo toma del 100%. Pero el 40% lo toma del 49% y yo quiero que lo tome del 100%

Alguna idea?

Les dejo los codes :S

Código:

<div id="puntos">
      <div style="width:<? echo $row['salud2']; ?>%" id="puntos_2"></div>
      <div style="width:<? echo $row['salud']; ?>%" id="puntos_3"></div>
    </div>

Código CSS:

#puntos_3 {
    background-color: #30F;
    height: 15px;
    z-index: 300;
    position:relative;
}
#puntos_2 {
    background-color: #36F;
    height: 15px;
    z-index: 200;
    position: relative;
}
#puntos {
    margin: 5px;
    border: thin solid #000;
    height: 15px;
}
 

Gracias