Alinear texto verticalmente en un div con altura variable

[titarelli]

Buenas noches ante todo, este es mi primer post y me registré despues de tiempo de ver el foro para buscar soluciones.

Lo que yo necesito no lo encontré (quizas no sé buscar, pido disculpas si ya existe) y es alinear verticalmente abajo un texto en un div de altura variable.

Ví que hay varias soluciones a este problema pero siempre con una altura fija, ya probé con height:100% pero no me funciona.

Acá pongo mi CSS

Código:

#foto_foto{
	float:left;
	width:900px;
	margin:0 auto;
}
#foto_caption{
	float:right;
	width:180px;
	position:relative;
}
#foto_caption div{
	position:absolute;
	bottom:0;
	right:0;
}

Y acá mi HTML

Código:

<div id="foto_post">
    <div id="foto_foto"><img src="test.jpg" width="900" height="400" /></div>
    <div id="foto_caption">
        <div>Texto texto texto</div>
    </div>
</div>

La idea es tener una imagen a la izquierda y que el texto que la describe quede a la derecha y alineado al "bottom".

Espero no ser molestia y agradezco cualquier ayuda.

Saludos

[GAST0N]

es necesario que tengas 2 div ??

<div id="foto_caption">
<div>Texto texto texto</div>
</div>


seria mejor

<div id="foto_post">
<div id="foto_foto"><img src="direcciondetuimagen" width="900" height="400" />
<p>Texto</p>
</div>
</div>


ahi le das estilo al P para ubicarlo bien,

[titarelli]

gracias gaston, aunque queda un poco mas limpio, no me soluciona el problema

[alexk]

Intenta con:
http://css.devillasbuenas.es/alineacion_multiple.html

[Webs_DS]

Buenas!!
Haber según lo que te entendí es que quieres que aparezca a la izquierda la imagen y a la derecha el texto no? y que quede asi siempre independiente dle tamaño de la ventana y navegador no? Entonces, donde estas los atributos del div "foto_post"??

Bueno si es asi te dejo lo que yo haría:


código CSS:

#foto_post{
width:1000px;
height:500px;}


#foto_foto{
float:left;
width:900px;
height:400px;}

#foto_caption{
float:right;
width:100px;
height:400px;}


Y el código Html:

<div id="foto_post">
<div id="foto_foto"><img src="webnew/img/bg.jpg" width="900" height="400" /></div>
<div id="foto_caption">
<div>Texto texto texto</div>
</div>
</div>


Y si no es lo que buscas, avisame,, y te ayudaré en lo posible,, ;)

Suerte!!

D.S.

[Webs_DS]

Perdón,, el código Html sería asi,,: (eliminar un div)

Html

<div id="foto_post">
<div id="foto_foto"><img src="webnew/img/bg.jpg" width="900" height="400" /></div>
<div id="foto_caption">
Texto texto texto
</div>
</div>

Saludos....

[versinlimites]

prueba con el atributo css vertical-align, pone el texto en la posicion que desees sin depender de la altura del idv

un ejemplo:

css:

Código PHP:

  .div p {
   vertical-align: bottom;
}  
   

html:

Código PHP:

  <div id="div1" class="div">
      <p>Esto es un texto alineado verticalmente abajo :D</p>
</div>  
   

saludos :)

http://versinlimites.com.ar/

[titarelli]

Web_DS, mi tema es que no puedo asignar un alto fijo, asi que tu respuesta no me sirve lamentablemente =(

Lo que estoy ahciendo es un theme para tumblr, y depende lo que el usuario suba, el alto del div va a cambiar, por eso no puedo asignarle un alto fijo.

Yo necesito algo así

[KurozakiIchigo]

Mira aqui, en este sitio tengo una recopilacion de muchos links.
http://www.recopilacionweb.tk/

y aqui habla sobre la alineacion del texto, respecto la imagen.
http://creatuweb.espaciolatino.com/tutorhtml/tema10.html#alineacion

[titarelli]

no me anda eso :(

alguna otra idea?