¿Cómo consigo que un div flote hasta el fondo de su contenedor?
He hecho flotar imágenes y cuadros insertados en la parte superior de un contenedor usando float:right(o left) muchas veces. Ahora, necesito hacer flotar a diven la esquina inferior derecha de otro divcon el ajuste de texto normal que se obtiene float(texto ajustado arriba y hacia la izquierda únicamente).
Pensé que esto debía ser relativamente fácil aunque floatno tiene ningún bottomvalor, pero no he podido hacerlo usando varias técnicas y al buscar en la web no se ha encontrado nada más que usar el posicionamiento absoluto, pero esto no da la comportamiento correcto de ajuste de palabras.
Pensé que este sería un diseño muy común pero aparentemente no lo es. Si nadie tiene una sugerencia, tendré que dividir mi texto en cuadros separados y alinearlos divmanualmente, pero eso es bastante precario y odiaría tener que hacerlo en cada página que lo necesite.
Establezca el div principal en position: relative, luego el div interno en...
position: absolute;
bottom: 0;
...y ahí lo tienes :)
Una forma de hacerlo funcionar es la siguiente:
- Haz flotar tus elementos a la izquierda como de costumbre.
Gire el div principal 180 grados usando
-moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);JSfiddle: http://jsfiddle.net/wcneY/
Ahora rota todos los elementos que flotan hacia la izquierda (dales una clase) 180 grados para volver a enderezarlos. ¡Voilá! flotan hasta el fondo.
Después de luchar con varias técnicas durante un par de días, debo decir que esto parece imposible. Incluso usando javascript (que no quiero hacer) no parece posible.
Para aclarar a aquellos que no lo hayan entendido, esto es lo que estoy buscando: en publicaciones es bastante común diseñar un recuadro (imagen, tabla, figura, etc.) de modo que su parte inferior quede alineada con la parte inferior del último Línea de texto de un bloque (o página) con texto que fluye alrededor del recuadro de manera natural arriba y hacia la derecha o izquierda, según en qué lado de la página se encuentre el recuadro. En html/css es trivial usar el estilo flotante para alinear la parte superior de un recuadro con la parte superior de un bloque pero, para mi sorpresa, parece imposible alinear la parte inferior del texto y el recuadro a pesar de ser una tarea de diseño común. .
Supongo que tendré que revisar los objetivos de diseño de este elemento a menos que alguien tenga una sugerencia de último momento.
Esto coloca un div fijo en la parte inferior de la página y se fija en la parte inferior a medida que se desplaza hacia abajo.
#div {
left: 0;
position: fixed;
text-align: center;
bottom: 0;
width: 100%;
}
