evitar que un div crezca al poner cosas con posicionamiento relativo

vereis qué pasa. tengo un div general con una imagen y un texto. quiero poner el texto sobre la imagen:

<div id="1">
<div id="2"><img /></div>
<div id="3" style="position:relative; top:-20px">texto</div>
</div>

mi problema es que aparece la imagen (id=2) aparece el texto (id=3) que hace que el id=1 crezca... y luego se coloca el texto

yo necesito que id=1 sea del tamaño que la imagen!

lo resuelvo forzando el tamaño de id=1 y poniendo overflow: hidden;

¿no hay otra manera? porque ahora necesito que el texto pueda sobresalir un poco por algún lado y no tengo manera de calcular esos desbordamientos...

Si lo único que necesitas es que el texto sobresalga un poco, quitale el overflow...
Si el texto está haciendo que el <div id="1"> crezca, ponle position absolute al texto.
Aquí te dejo un mini ejemplo, espero te sirva.

OK...
div '1' position: relative
div '3' position: absolute

funciona de maravilla... muchas gracias!