Cómo flotar imágenes en un post

Un lector me preguntó como hago para ubicar las imágenes hacia un costado en cada post. Es un proceso simple que hago con ayuda de CSS. Esto servirá a todo aquel que quiera tener fotos flotadas hacia un costado en su weblog.

Ingredientes: una hoja de estilos + un poquito de XHTML.

En la hoja de estilos que utilizamos para nuestro blog, escribir esto:

img.right {
    float: right;
    margin: 3px 0px 20px 20px;
    display: block;
    }

Este comandillo de CSS permite que todas las imágenes que tengan una clase .right se posicionen hacia la derecha. En vez de usar right puedes poner derecha o el nombre que quieras, siempre y cuando en el XHTML pongas eso, claro. Comenzando por la primera propiedad float, que permite a un elemento flotar sobre el contenido que tenga a sus costados, así que, con conocimiento de causa se pueden hacer maravillas con esta propiedad, eso sí, sin abusar que luego vienen los dilemillas. Cualquier elemento que utilice una propiedad float se convertirá en un elemento reemplazado con propiedades de bloque. Esto es un poco engañoso pero ya lo expliqué una vez en el punto número 10 de la entrada 13 reglas de oro para dar el gran paso. Hay tres estados para esta propiedad: left, right y none, en este caso me haré amigo del estado right.

Luego podrán observar otras propiedades más que he agregado. La siguiente sirve para alejar otros elementos de la imagen. Usando margin, me doy el lujo de posicionar la imagen entre los límites top, left, right, bottom de la misma. Puedo hacer que la imagen se ubique 3 o 4 píxeles más abajo, que el texto no llegue a tocar la imagen flotada tanto para la parte izquierda de la imagen como para la inferior.

Luego queda la propiedad display, que sirve para cambiar la naturaleza del elemento, también explicado en el paso diez de la entrada 13 reglas de oro para dar el gran paso.

Escrita esta regla de CSS, en nuestro post tenemos que poner la imagen de esta forma:

<p><img src="/images/macosx.png" alt="Captura de pantalla" title="Mac OS X" class="right" /> El Mac OS X
es un sistema operativo…

Como podrán observar, la imagen va dentro de la etiqueta <p> ya que me interesa que sea parte del tema que se está hablando, como es un elemento de linea tiene que ir encerrado sí o sí dentro de uno de bloque. Si lo pongo fuera, algunos navegadores me darán dolores de cabeza, mejor lo pongo dentro para tomar como margen al párrafo.

Luego se pueden hacer extensiones de esto. Por ejemplo, si tengo una imagen, podría agregar otra clase más y combinar dos clases de CSS en una etiqueta <img> y de esta forma darle otras propiedades más a las imágenes que no tengan espacios negativos. Por ejemplo, a veces suelo poner un borde de 1 pixel de ancho alrededor de la misma imagen. También para que no quede tan soso le pongo un padding (almuadilla) entre el borde y la imagen, dejando como resultado un lindo marco. Esto va a gusto de cada uno, pero a la hoja de estilos que tenemos agregamos otra clase más:

img.borderimg {
    padding: 1px;
    border: 1px solid #ccc;
    }

Luego resta poner en la clase de la imagen un espacio y borderimg. Combinada con la anterior que flota la imagen a la izquierda quedaría así:

<img src="/images/alt.png" class="right borderimg" alt="alt" />

Este método te permite tener varios modos de presentación para imágenes. Por ejemplo, si uno tiene ya una clase para flotar todo a la izquierda, puede tener otra clase para agregarle a las imágenes que necesiten marcos, pueden agregar un fondo para aquellas imágenes que necesiten fondo y un montón de cosas más.

Espero que les haya servido de ayuda.