a ver, expresemonos en código:
¿tienes algo asi no?
Código:
<div>
<div></div>/*supongo que a la imagen la inlcuyes con background-image + width y height*/
y aqui tenemos un texto ...
<div></div>
</div>
Yo lo haría de este modo: /*asi tienes otra alternativa a la de Alberto*/
Código:
En tu html:
<div id="contenedor">
<div id="izquierda"></div>/*damos lo supuesto como cierto*/
<div id="centro">y aqui tenemos un texto </div>
<div id="derecha"></div>
</div>
En tu css:
#contenedor {
overflow:hidden; /*limpiamos los float*/
width:900px; /*ancho total = width+margin+pading+border*/
border:0;
margin:0;
padding:0;
}
#izquierda {
width:300px;
float:left;
}
#centro {
width:300px;
float:left;
}
#derecha {
width:300px;
float:left;
}
Bien hasta aqui todo va bien no?
Entonces supongamos que quieres agregarle un padding:10px; a #centro para dar "aire" al texto.
Esto hará que el ancho total de #centro sea de 300px + 20px dado que esta tomando el pading derecho e izquierdo mas el width. ¿La solución? resta tu padding a width, ej:
Código:
#centro {
width:280px;
float:left;
padding:10px;
}
Seguramente notaste que cuando #centro tomó 320px de ancho #contenedor desbordó enviando a #derecha hacia abajo. Esto sucede porque los elementos flotados se van acomodando en donde encuentran lugar, es decir, si no encuentran lugar en una línea se ubican en la línea inmediata siguiente.
Espero te haya servido de algo, un saludo!