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!