alinear divs en la parte inferior de su contenedor

Question

Pensé que esto sería simple, tengo que alinear los dos div interiores (verde y azul) en la parte inferior de su contenedor (rojo). Espero no utilizar el posicionamiento absoluto y necesito que sea ie6,7,8 ff cromo safari, etc. compatible.

<div style="border:1px solid red;"> 
    <div style="border:1px solid green; width:20px; height:20px; float:left;"></div> 
    <div style="border:1px solid blue; width:20px; height:30px; float:left;"></div> 
    <div style="clear:both;"></div> 
</div> 

He intentado usar vertical-align pero no puedo encontrar una solución sencilla.

gracias por la ayuda, p.

EDITAR aquí está mi intento de solución POS ABS:

<div style="border:1px solid red; position:relative;"> 
    <div style="border:1px solid green; width:20px; height:20px; float:left; position:absolute; bottom:0px;"></div> 
    <div style="border:1px solid blue; width:20px; height:30px; float:left; position:absolute; bottom:0px;"></div> 
    <div style="clear:both;"></div> 
</div> 

Answer 1

Por qué no puedes utilizar el posicionamiento absoluto? Vertical-align no funciona (excepto para las tablas). Haga la posición de su contenedor: relativa. Luego, coloca absolutamente los divs internos usando bottom: 0; Debería funcionar como un encanto.

EDITAR Por zoidberg (i actualizará la respuesta en lugar)

<div style="position:relative; border: 1px solid red;width: 40px; height: 40px;"> 
    <div style="border:1px solid green;position: absolute; bottom: 0; left: 0; width: 20px; height: 20px;"></div> 
    <div style="border:1px solid blue;position: absolute; bottom: 0; left: 20px; width: 20px height: 20px;"></div> 
</div> 

Answer 2

no me gusta el posicionamiento absoluto, o bien, porque casi siempre hay algún daño colateral, es decir, efectos secundarios no deseados. Especialmente cuando trabajas con un diseño receptivo. Parece haber una alternativa: la técnica del saco de arena. Al insertar un elemento "auxiliar", ya sea en la marca de acceso a través de CSS, podemos empujar los elementos hasta el fondo del contenedor. Ver http://community.sitepoint.com/t/css-floating-divs-to-the-bottom-inside-a-div/20932 para ejemplos.

Answer 3

¡Puedes hacer trampa! Digamos que su div es de 20 píxeles de alto, colocar el div en la parte superior de la siguiente contenedor y establecer

position: absolute; 
top: -20px; 

puede que no sea semánticamente limpia pero qué escala con diseños que responden

Answer 4

La forma moderna de hacer esto es con Flexbox, agregando align-items: flex-end; en el contenedor.

Con este contenido:

<div class="Container"> 
    <div>one</div> 
    <div>two</div> 
</div> 

Usar este estilo:

.Container { 
    display: flex; 
    align-items: flex-end; 
} 

https://codepen.io/rds/pen/gGMBbg