Alineando div dentro de otra div

Puedes visitar el sitio en el que estoy trabajando aquí . Actualmente, estoy trabajando para que el sitio sea relativo. Estoy ajustando el CSS para una resolución con un ancho inferior a 820px. Esto implica ajustar el menú de esta imagen de navegación a gran resolución http://oi57.tinypic.com/2sbld1s.jpg

a esta foto de navegación en una resolución estrecha http://oi58.tinypic.com/qqswuo.jpg . Como puede ver, he delineado mis divs con un borde rojo para demostrar el problema. Quiero que la barra de menú se hunda en la parte inferior de su div principal. Sin embargo, poniéndolo en la bottom: 0 nada cambia. ¿Cómo puedo obtener la div class="nav" para que se hunda en la parte inferior de div class="header" con una resolución inferior a 820px?

Aquí está mi HTML

  

Y mi CSS

 .header { width: 960px; height: 150px; margin: 0 auto; text-align: center; position: relative; padding: 100px 0px 0px 0px; } .header div#narrow-logo { display: none; } .nav ul li { display: inline-block; vertical-align: middle; margin-right: 70px; } #logo a img { max-width: 250px; height: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } #logo { width: 250px; position: relative; } @media screen and (max-width: 1080px) { .header { width: 700px; height: 125px; padding: 75px 0px 0px 0px; } #logo a img { max-width: 180px; } #logo { width: 180px; } @media screen and (max-width: 820px) { .header { border: 2px solid red; width: 475px; padding: 0; margin-top: 40px; height: 200px; } .header div#narrow-logo { border: 2px solid red; display: inherit; position: absolute; left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%); } .header div#narrow-logo a img { width: 200px; height: auto; } .nav { border: 2px solid red; bottom: 0px; } .nav ul li { margin-right: 25px; } .nav ul li:nth-child(3) { display: none; } #logo a img { display: none; } #logo { width: 0; } 

Sé que es mucho código y me disculpo. Solo quería asegurarme de incluir todos los atributos de posicionamiento que podrían estar causando mi problema. Avíseme si puedo aclarar algo, y agradezco su tiempo y consejos.

Para la bottom:0 para trabajar, necesita que el elemento al que se está aplicando esté absolutamente posicionado. También necesita, en este caso, tener su padre relativamente posicionado. Prueba esto:

 .nav ul li { display: inline-block; margin-right: 70px; position:absolute; bottom:0; } 

Agregar valor de posición resolverá su problema. Actualice su CSS en la siguiente sección.

 @media screen and (max-width: 820px) { .nav { border: 2px solid red; bottom: 0px; position:absolute; left:16%; } } 

Por abajo: 0; para trabajar, tu clase = “nav” tiene que tener un posicionamiento absoluto.

CSS:

 .nav { position: absolute; bottom: 0;