Pegar contenido al fondo de una caja

[rogertm]

Hola por acá. pues bien, tengo una caja en la que a su vez, tengo cuatro cajas más con contenido diferente cada una, y por supuesto, la altura de cada una varía, y se me ocurrió que quedaría bien si se pegan estas cuatro cajas al fondo, pero no encuentro la manera. Tengo el siguiente código:

Código HTML:

<section id="footer-widget-area" role="complementary">
    <aside id="first" class="widget-area"> contenido 1 </aside>
    <aside id="second" class="widget-area"> contenido 2 </aside>
    <aside id="third" class="widget-area"> contenido 3 </aside>
    <aside id="fourth" class="widget-area"> contenido 4 </aside>
</section>
 

Código CSS:

#footer-widget-area {
    overflow: hidden;
}
#footer-widget-area .widget-area {
    float: left;
    margin-right: 20px;
    width: 220px;
}
 

He intentado jugar con la propiedad position y vertical-align, pero no logro lo que quiero. Aquí les dejo una imagen de lo que tengo y se darán cuenta de lo que quiero:



Saludos y gracias de antemano

[davidbrepe]

no entiendo muy bien...
cuando dices que se peguen al fondo te refieres a que no se pueda interactuar con el ratón?
que sea como una imagen?

si es así prueba a ponerle un z-index:10 y a poner una capa transparente por encima, con z-index: 20 por ejemplo

[rogertm]

No... lo que quiero es que se vea exactamente al revés a como está la imagen. Que las cajas de adentro <aside> ...</aside> estén pegadas al fondo de la caja que las contiene <section> ...</section>

Gracias por intentar ayudar... Saludos.

[ArturoGallegos]

especifica una altura a la etiqueta <section> ya sea fija o en porcentaje y aplica un alto al 100% a la etiqueta <aside>

y si no te anda bien eso tendrás que buscar la forma de adaptar la técnica de columnas equilibradas con estas etiquetas del html5 que la verdad no se que tanto difiera.

[sanxuan]

Supongo que lo que quieres es que las cajas queden pegadas al borde inferior de su contenedor y no al fondo. Yo tampoco lo entendí a la primera.
Mi navegador tampoco entendió el HTML5 hasta que le hice saber de su existencia. De momento no constituye un estándar.
Salvo que CSS3, que tampoco es estándar aún, tenga alguna forma más simple de lograrlo(http://www.w3schools.com/css3/css3_pr_box-align.asp), sólo se me ocurre utilizar posicionamiento absoluto para las cajas dentro de un contenedor con posicionamiento relativo. En esas circunstancias la etiqueta aside supongo que pierde totalmente su razón de ser.
También podríamos desplazarlas mediante posicionamiento relativo o usando márgenes, pero en cualquier caso es necesario que conozcamos de antemano la altura de las cajas para realizar los ajustes.

[kseso?]

<section id="footer-widget-area<- si fuese necesario limpiar los float para que crezca" role="complementary">
<aside id="first <- posición absoluta, bottom 0 left el calculado" class="widget-area"> contenido 1 </aside>
<aside id="second<- posición absoluta, bottom 0 left el calculado" class="widget-area"> contenido 2 </aside>
<aside id="third<- posición absoluta, bottom 0 left el calculado" class="widget-area"> contenido 3 </aside>
<aside id="fourth<- posición relative, flotado right" class="widget-area"> contenido 4 </aside>
</section>

Aunque quizás quedase más estético (y es una opinión personal) que fuesen de igual altura todos los aside (falsas columnas equilibradas) o incluso una escalera decreciente de izquierda a derecha (Bloguer->Post->Pages->Coments según los contenidos de la imagen).

Sanxuan: la etiqueta aside no tiene (por semántica) ninguna relación con las propiedades position o similares. Símplemente engloba contenidos un tanto ajenos (o secundarios) a la temática principal (article) pero con cierta relación entre ellos (los aside incluidos conjuntamente en el mismo section). Creo, o al menos así es como yo los asimilo.

[rogertm]

Excelente @kseso?, tu respuesta me ha dado la solución y un gramo más de conocimiento en esto del CSS

Gracias también por la sugerencia de la posición de los widgets, pero esos son solo de prueba, aunque en realidad lo que quiero es que se muestren de manera desordenada, osea, sin que el tamaño sea el que prime el orden de los mismos, sino el contenido, así cambiarán constantemente dependiendo de los comentarios, los post, etc, y serán diferentes a cada rato...

Un saludo y gracias a todos por ayudarme

[rogertm]

Weow! Me acabo de dar cuenta que la caja contenedora asume el tamaño del aside de la extrema derecha... ¿Cómo puedo hacer para que asuma el de la mayor?

He intentado algunas cosas con las posiciones, pero no logro nada...

[kseso?]

Con mis disculpas por el retraso, que quizás llegue tarde:

Iniciado por rogertm

Weow! Me acabo de dar cuenta que la caja contenedora asume el tamaño del aside de la extrema derecha...<--lógico, si usaste mi sugerencia, es la que tiene position:relative, las otras al estar en absolute no fuerzan a su padre a crecer, ni con overflow ni con nada ¿Cómo puedo hacer para que asuma el de la mayor?<-- asignandole el relative a la caja mayor, ya sea manualmente (porque a priori sepas cuál será o si lo desconoces mediante programación -si fuera posible-)

He intentado algunas cosas con las posiciones, pero no logro nada...