Hola! Para serte sincero me costó entender lo que querés.
De todas maneras, he hecho esto: http://jsfiddle.net/WqW2u/1/
¿Es lo que querés?
Utilicé la siguiente estructura (ya que como bien dijeron los chicos más arriba, no es recomendable usar tablas para armar la estructura de una página, sólo sirven para datos tabulados. Si querés, podés conseguir el mismo efecto que las tablas y usar las mismas propiedades utilizando
display: table;):
Código HTML:
<figure id="one">
<span id="text-one">Esta es una imagen abstracta</span>
<img class="image" src="http://lorempixel.com/200/200/abstract" />
</figure> Acá está el CSS
Código:
body, figure, span, img {
margin: 0;
padding: 0;
}
html, body { height: 100%; }
figure {
padding: 0 2em 2em;
border: 1px solid black;
}
figure,
figure > * { float: left; }
img { clear: left; }
span {
margin-top: 5%;
}
Si querés posicionar el texto 5% más abajo de la parte superior del contenedor, ¿por qué no usar margin-top: 5%? (si es que entendí a lo que querés llegar).
Ahora, si querés el texto abajo usá figcaption:
http://jsfiddle.net/wxtU6/1/
Usar padding-top: 5% en este caso tiene la misma finalidad.
Cualquier cosa que esto no sea lo que querés, no dudés en decirme.
Un saludo,
Leo!