Alinear Imagen Con Texto Aparte

[Argosth]

Hola, quería preguntar a la comunidad, a cualquier conocedor de CSS, si me pueden ayudar con un tipo de alineación que quiero de imagen.

Creando una página web, quiero poner las imágenes como si fuera un libro, que la imagen va a la derecha o izquierda, pero que el texto siempre vaya delante o detrás de la imagen.

Bien, hasta aquí lo tengo solucionado con el atributo float: right/left.

Pero el problema es que las imágenes siempre son cuadradas, aunque tengan fondo transparente, y el texto pasa a la siguiente línea en forma justificada, y lo que quiero es que la imagen esté alineada sobre el texto, es decir, incluso que el texto pase por debajo o por encima de ella, que no estén con el código.

Es algo que para un experto es fácil, pero no he encontrado solución, espero que alguien me pueda ayudar.

[cristian_cena]

Si no entiendo mal cuando el texto pasa a la siguiente línea lo hace por debajo de la imagen no?

De ser así lo solucionas haciendo lo siguiente:
1 un contenedor padre <div id="padre"></div>
2 un contenedor para la imagen <div id="imagen"></div>
3 un contenedor para el texto <div id="texto"></div>

tu html quedaría así:

Código HTML:

<div id="padre">
<div id="imagen"><img/></div>
<div id="texto"><p>texto ...</p></div>
</div> 

ahora los estilos:

Código:

*{margin:0; padding:0;}
#padre{
width: /*a*/ ;
/*height: el alto que tu quieras, puedes definirlo o no;*/
overflow:hidden; /* para que funcione bien el flotado*/
}
#imagen, #texto {float:left;}
#imagen{
width: /*b0*/ ;
border: /*b1*/;
padding: /*b2*/;
margin: /*b3*/;

/*height: el alto que tu quieras, puedes definirlo o no;*/
}

#texto{
width: /*c0*/ ;
border: /*c1*/;
padding: /*c2*/;
margin: /*c3*/;

/*height: el alto que tu quieras, puedes definirlo o no;*/
}

explico:
El ancho total de una caja no es lo mismo que el width.
Ancho total = width + margin+ padding+ border
width = ancho del contenido de la caja.

Entonces a = b0+b1+b2+b3+c0+c1+c2+c3.
Puede que tus elementos flotados, sumados sean de menor ancho total que el contenedor padre, ahi no habría problemas. El problema ocurre cuando los anchos totales de los hijos supera al width del padre.

Si ya definiste el height verás como quedó tu maqueta, si en cambio no lo has definido entonces carga la imagen y el texto dentro de sus cajas correspondientes y recién ahí empezarás a verlo, pues tu width y tu height todavía son igual a cero.

Espero te sirva, siempre es mejor que nos muestres una imagen del problema o un codigo, asi las respuestas son más claras. Un saludo!