Consulta novato : Posiciones de los DIV

[matucasal]

Hola gente del foro.
Vuelvo al foro a relizarles una consulta. Estoy armando mis primeras maquetas con css, y tengo dos problemas que no puedo resolver.

1)Me gustaria saber como hacer para que la pagina con todos sus divs entre perfecto en el navegador, en la pantalla. Es decir, que todo se ajuste
al monitor, nose si se entiende. Yo tengo este codigo, pero tengo entendido que los % no funcionan en todos los exploradores, me gustaria saber si hay algo mas efectivo.

Código HTML:

html {

   width: 100%;

   height:100%;

   margin: 0;
   

}

2) Mi verdadero problema, y el que mas tiempo me consumio, que nose como resolver. Yo tengo este html.

Código HTML:

<div id="cabeza">
<div class="foto"></div>
</div> 

Es una clase div dentro de un div, ahora tienen este css:

Código HTML:

#cabeza{
	height:550px;
	width:100%;

	background-color: gray;
	
}

#cabeza .foto{
	height:450px;

	width:100%px;

	background-color: aqua;
	vertical-align: bottom;

	position: relative;
		
}

Mi intencion es que la clase foto (.foto) aparezca abajo dentro del otro div, es decir que la parte del color aqua este abajo del color gray. Intente cpn el vertical-align:bottom, pero no cambio en nada. Creo que se comprende lo que intento, cualquier cosa si no se entiende avisenme.
Espero su ayuda.
Muchas gracias, saludos

[hades87]

y si le das un margin al div foto?

[matucasal]

Ya habia intento, algo como margin-top:100px
y tampoco funcionaba, por ahi tenia que agregar algo mas.
Gracias igualmente

[kseso?]

Primero, corrige el desliz:
#cabeza .foto{ width:100%px;

Segundo, utiliza preferentemente la notación hexadecimal para los colores.

Tercero, creo que en este caso está justificado el uso de la posición absoluta para ubicar en su sitio .foto:

#cabeza .foto {
background-color:#00FFFF;
height:450px;
width:100%;
position:absolute;
bottom:0;
width:100%;
}

Un saludo

[matucasal]

Bien! asi era al final muchas gracias kseso

[jomaruro]

Hola:

Ya que estás empezando con el CSS te recomendaría leerte las guías de Mikmoro:

1º Guía de migración a XHTML y CSS.
2º Guía de migración a XHTL y CSS - Parte II.

Te serán muy útiles.

Saludos.