Hola
nicoquagliata.
¿Márgenes al DIV de la imagen? Lo siento, no entiendo lo que quieres decir. Si puedes prepararme un ejemplo sencillo sería más fácil de comprender.
Respecto a código inicial... se ve que no tengo nada pensado. No sé si colocar cada columna en un DIV, si la imagen en otro DIV o no... la verdad es que no se me ha ocurrido cómo meter la imagen ahí sin que tape el texto.
He hecho un ejemplo bastante penoso, en el que la misma imagen tiene que estar repetida en el mismo documento dos veces, y encima hay que encajarla con malsana intención en su debido sitio.
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
body {
font-family: Sans, times;
font-size: 16px;
}
#columna1 {
float:left;
width: 400px;
background-color: #ae5578;
text-align: justify;
padding: 15px;
}
#imagen {
float:right;
position: relative;
left: 50%;
margin: 5px;
margin-left: -50%;
}
#imagen2 {
float: left;
position: relative;
left: -28%;
margin: 5px;
margin-right: -28%;
}
#columna2 {
float:left;
width: 400px;
background-color: #7855ae;
text-align: justify;
padding: 15px;
}
</style>
</HEAD>
<BODY>
<div id="columna1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce feugiat purus a magna. Cras et risus ac justo gravida egestas. Pellentesque tortor massa, dignissim vestibulum, tempor vel, pretium vel, enim. Nam imperdiet. Donec tempor, elit vitae aliquet tincidunt, lorem libero adipiscing pede, vitae posuere turpis nisi vitae diam. Vivamus scelerisque, erat eu posuere tempus, velit dolor consectetuer felis, et cursus nulla leo non justo.
<img id="imagen" src="http://www.google.es/intl/en_com/images/logo_plain.png" width="276" height="110" />
Suspendisse egestas nisl sit amet tellus. Nullam feugiat iaculis dolor. Integer ipsum ligula, sodales eu, bibendum ac, lobortis at, arcu. Morbi sagittis tristique urna. Nulla quis ipsum. Maecenas sodales tristique leo. Pellentesque vel pede. Vestibulum sit amet dolor et sapien molestie pharetra. Aliquam in ipsum vitae libero ultrices pharetra. Nullam ullamcorper aliquet pede. Praesent magna pede, tincidunt ut, tristique eget, ornare at, nulla. Ut in est. Etiam eu lorem ullamcorper risus vestibulum vestibulum.
</div>
<div id="columna2">
Vestibulum consectetuer lorem eget arcu. Proin ullamcorper. Mauris mattis erat vel lacus. Vestibulum eget nisi. Integer elementum congue odio. Sed a nunc cursus nulla luctus mollis. Proin mollis erat id turpis. Cras a enim sit amet nisi luctus porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam gravida. Praesent volutpat mi vitae est.
Nullam fermentum, tortor at interdum ullamcorper, est dui placerat arcu, vel ultrices dolor <img id="imagen2" src="http://www.google.es/intl/en_com/images/logo_plain.png" width="276" height="110" /> elit eleifend mi. Curabitur bibendum. Phasellus varius. Donec vel justo vitae nisl suscipit fringilla. Cras a felis. Nunc accumsan dapibus felis. Vestibulum sollicitudin lacus sit amet est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas vel metus vel lorem viverra congue.
</div>
</BODY>
</HTML>
Hace el efecto, pero siempre y cuando todo encaje, el usuario no cambie de tamaño de fuente... (de ahí que el tamaño de letra esté forzado en píxeles). AVISO: Sólo lo he encajado para FF y IE6, quizás sólo funcione en mi máquina.
Bueno, que me gustaría algo
bien hecho, correcto.
A ver si a alguien se le ocurre.