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...

- Estilos en formularios: Bordes llamativos para campos de formulario en CSS
- Menus simples con CSS y listas
- Menú con efecto onmouseover con CSS
- Estilos CSS distintos con PHP y cookies
- CSS para imprimir páginas web

- Versión imprimible de este documento

- Enviar por e-mail este documento