Posicionar una imagen rodeada de texto con CSS

Quizá sea una de las técnicas más básicas y sencillas. Tan sólo es necesario escribir un XHTML de este tipo:

<img src="imagen.png" alt="texto alternativo" />
<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sapien ante, cursus ut, luctus vel, viverra ut, diam. Curabitur turpis pede, consectetuer a, dictum eu, rutrum sed, diam. Cras ac leo quis pede eleifend laoreet. Integer sollicitudin turpis. Morbi quis risus. Vestibulum sed nulla quis quam rhoncus volutpat. Curabitur orci quam, luctus imperdiet, dapibus vel, aliquet et, turpis. Aliquam dapibus nisi. Nullam arcu quam, dapibus a, porttitor vel, ornare vitae, ligula. Aliquam vulputate. Nunc faucibus. Proin at arcu vitae augue porta volutpat.

</p>

Si ponemos este código tal cual aparecerá la imagen y debajo el texto. Si queremos que el texto rodee la imagen, como se suele ver en los periódicos y revistas, entonces utilizaremos la propiedad "float" de CSS. Vamos a ver cómo:

<img src="imagen.png" alt="texto alternativo" style="float: left;" />
<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sapien ante, cursus ut, luctus vel, viverra ut, diam. Curabitur turpis pede, consectetuer a, dictum eu, rutrum sed, diam. Cras ac leo quis pede eleifend laoreet. Integer sollicitudin turpis. Morbi quis risus. Vestibulum sed nulla quis quam rhoncus volutpat. Curabitur orci quam, luctus imperdiet, dapibus vel, aliquet et, turpis. Aliquam dapibus nisi. Nullam arcu quam, dapibus a, porttitor vel, ornare vitae, ligula. Aliquam vulputate. Nunc faucibus. Proin at arcu vitae augue porta volutpat.

</p>

Lo único que hemos hecho ha sido añadir el atributo style="float: left;" a la etiqueta img. De esta forma quedará la imagen a la izquierda y a la derecha el texto rodeando la imagen. La propiedad float la podemos utilizar tanto en imágenes como en otros elementos de XHTML.

Usuarios que han visto este tema también han visto...

- Una hoja de estilo para diagnosticar fallos en el marcado
- Optimizar el CSS sin usar PHP
- Cambiando de color las barras de scroll
- Elementos AFTER y BEFORE en CSS
- Cambio de contraste con Javascript y CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento