Cuando intento alinear el texto en un elemento DIV, me enfrento al problema de que cuando el texto anterior es lo suficientemente largo para alcanzar la parte inferior del elemento DIV, se superpone con el texto alineado abajo. Aquí está el código: http://jsfiddle.net/Kw758/Cómo evitar la superposición de texto en el elemento DIV alineado a la parte inferior
<html>
<head>
<title>Date</title>
<style type="text/css">
#container {
position: relative;
border: 1px solid gray;
width: 200px;
}
#date {
margin-top: 1em;
position: absolute;
bottom: 5px;
right: 5px;
}
</style>
</head>
<body>
<div id="container">
<span>
This is a very very long text that might overlap with the date
just below this.
</span>
<div id="date">
January 1, 2012
</div>
</div>
</body>
</html>
¿Cómo puedo evitar la superposición de texto en el elemento SPAN y el texto en el elemento DIV?
La razón por la que estoy alineando la parte inferior con el atributo 'posición' en lugar de simplemente configurar la fecha en 'flotante: derecha' es porque en mi problema real, se supone que el DIV tiene un conjunto de altura mínima, por lo el borde inferior del elemento DIV puede estar muy lejos del texto en el elemento SPAN.
tiene una apariencia similar a ésta: http://stackoverflow.com/questions/499829/css-wrap-text-around-a-bottom-right-div – dldnh
Lo es, pero en su ejemplo, el texto es necesario para envolver el elemento ubicado en la parte inferior. Ese no es el caso aquí y, por lo tanto, parece ser mucho más simple. –