Ir directamente al contenido de esta página

codexexempla.org

Más sobre posición y flotado

Tabla de contenidos

  1. El flujo normal del documento
  2. Posicionar elementos
  3. Flotar elementos
  4. Crear columnas: posición vs. flotado

El flujo normal del documento

Posicionar o flotar un elemento altera la situación de ese elemento con respecto al lugar que ocuparía en caso de que no se hubiesen aplicado ninguna de estas propiedades. Por eso es importante que antes de hablar de estas alteraciones comprendamos cómo se situan los elementos según lo que se suele llamar el flujo normal del documento.

Al representar en un medio de pantalla un documento, todo elemento genera una caja. Dependiendo del tipo de elemento, se tratará de una caja de bloque o de una caja en línea, pero la idea básica es que ambos ocupan un espacio, y que según su posición en el marcado afectan a la posición de los elementos adyacentes. Todo elemento de línea se extiende hasta el límite de su contenido, desplazando a los demás elementos en línea con los que comparte contenedor. Por su parte, los elementos de bloque se sitúan siempre debajo de los elementos de bloque anteriores y «empujan» a los bloques siguientes más abajo a la hora de ser representados.

Básicamente, esto es el flujo del documento: los elementos ocupan un espacio y sitúan tras de sí a los elementos siguientes, según el orden en el que aparecen en el marcado.

Posicionar elementos

Cuando aplicamos la propiedad de CSS position podemos alterar la situación de un elemento con respecto al flujo normal del documento. position tiene cuatro valores:

Vamos a ver las diferencias con unos ejemplos.

Primero, tenemos un documento con tres elementos a los que no he asignado position, por lo que se aplica el valor por defecto, static. Según el flujo normal del documento, cada uno se sitúa en el orden que le corresponde por el marcado, y su altura define el lugar que le corresponde al siguiente.

Si ahora asignamos al segundo una posición relativa, aunque el navegador nos lo represente desplazado de su posición normal, la situación de los elementos primero y tercero no varía, puesto que la situacion «real» del elemento sigue siendo la que tenía como elemento estático.

Si en lugar de eso le asignamos una posición absoluta, deja de afectar al resto de los elementos del documento. Así, tercer elemento se reposiciona con respecto al anterior elemento que tenga asignada una posición estática o relativa, en este caso el primero.

Por último, si hacemos que su posición sea fija el resto de elementos se comportarán para como si su posición fuese absoluta, pero no se verá afectado por la barra de scroll lateral.

Sólo queda indicar cómo se sitúan los elementos posicionados de manera relativa o absoluta. Como ya he dicho antes, se hace por medio de de las propiedades top, left, right y bottom —que aceptan valores positivos o negativos—, pero se aplican con puntos de referencia diferentes:

Para terminar, un apunte sobre márgenes. En el caso de los elementos posicionados de manera relativa, los márgenes se mantienen en la posición original del elemento, pero no cuentan para establecer los bordes iniciales desde los que se aplican las propiedades de posición. En el caso de los elementos en posición absoluta, los margenes se aplican de la manera habitual.

Flotar elementos

Además de position, existe otra propiedad que puede alterar el flujo normal de un documento: float. Cuando se flota un elemento, se convierte en un elemento de bloque que se sitúa adyacente al borde elegido de su bloque contenedor, y el resto del contenido con el que lo comparte se reparte alrededor de él.

Los valores de float son los siguientes:

Hasta aquí, la parte intuitiva. Ahora, hagamos otra lista con las puntualizaciones que hay que memorizar para luego no sentirnos perplejos cuando apliquemos esta propiedad:

Bien, ahora que sabemos lo que es posicionar y lo que es flotar, y sus diferencias, vamos a ver una de las aplicaciones más comunes: crear columnas.

Crear columnas: posición vs. flotado

Todos los desarrolladores web que desterramos las tablas para maquetar nos encontramos con el problema de cómo crear ahora columnas por medio de CSS.

Salvo unos pocos iluminados, el primer impulso de un principiante es posicionar las columnas. Ciertamente, es la forma más sencilla:


    #cabecera{
        height:90px;
        background:#000 url(imagenes/cabecera_01.png) no-repeat;
        padding:0;
    }
    
    #contenido_principal{
        width:600px;
    }
    
    #contenido_secundario{
        position:absolute;
        top:120px;
        left:600px;
        width:300px;
        border:1px solid #CCC;
        background:#EEE;
    }
            

Lo que hacemos es sacar el contenido secundario del flujo del documento para colocarlo en la posición lateral. Para empezar, dependemos de la altura de la cabecera, aunque ese suele ser el menor de los problemas si se trata de una imagen a la que hemos asignado un alto fijo. Tampoco es problema el valor que asigna a left, puesto que hemos fijado en ancho del contenido principal a un valor de 600 píxeles —aunque eso nos imposibilita elegir un diseño fluido, pero ahora no es esa nuestra intención—. Si vemos el resultado, en apariencia hemos conseguido nuestro objetivo.

Pero hay un problema serio. En el caso de que el estilo se aplique a una única página que controlásemos completamente con mano de hierro, podría mantenerse el diseño. Pero si los contenidos de ambas columnas son dinámicos, o según la sección hay mucha diferencia de amplitud, podría ocurrir que la columna posicionada de forma absoluta fuese más larga que la columna que se mantiene en el flujo normal. En tal caso, la columna se solapa con el pie, ya que no puede afectar a su posición al estar fuera del flujo del documento.

La solución, por tanto, no es reposicionar las capas, sino flotarlas. Como los elementos flotados siguen afectando —aunque a su manera particular— al flujo del documento, se pueden aprovechar para crear columnas. No obstante, como vamos a ver inmediatamente, se necesita aplicar la propiedad clear para lograr el efecto óptimo.

Usando el mismo código que para los ejemplos anteriores, aplico float al contenido principal y al secundario...


    #contenido_principal{
        width:600px;
        float:left;
    }
    
    #contenido_secundario{
        width:300px;
        margin-top:20px;
        float:left;
        border:1px solid #CCC;
        background:#EEE;
    }
            

...y el resultado es un tanto desastroso.

¿Por qué? Porque, como hemos visto, los elementos flotados no afectan a la posición de los elementos posteriores. El primer elemento no posicionado con el que se encuentra el pie es la cabecera, así que se sitúa bajo ésta; pero su contenido si se ve afectado por los elementos flotados, así que se situa bajo el segundo, extendiendo el área total del párrafo.

Aquí es donde entra en juego clear, cuyos valores son:

Visualmente se comprueba su funcionamiento en este ejemplo.

Eso es justo lo que necesitamos, añadir a la regla creada para el pie una línea más:


    #pie{
        clear:both;    
        padding:5px 0;
        margin:0;
    }
            

En apariencia, el resultado es el mismo que para el primer ejemplo de columnas creadas con position, pero ahora el flotado del contenido secundario afecta a la situación del pie, reposicionándolo si es necesario.

Además, flotar las columnas tiene la ventaja adicional de que nos permite crear un diseño fluido si lo deseamos.

En la anhelada especificación de CSS 3 —para el momento en que escribo— hay un módulo para columnas (inglés) que nos simplificará la vida. En este momento no tiene soporte directo, pero uno se puede hacer una idea de cómo funciona por medio de las extensiones -moz-column- en Mozilla o Firefox.

Notas

  1. En un medio de impresión significa que aparece en la misma posición en cada página. Volver
  2. Lo que es el colapsado de márgenes lo hemos visto con anterioridad al tratar la propiedad margin. Volver
  3. Un elemento reemplazado es aquel cuyo contenido no está presente en el documento. Un ejemplo típico es img: en el código está el elemento, pero el contenido de la imagen está en el archivo que se incruste al representar el documento en un agente de usuario. Por su parte, los elementos no reemplazados son aquellos cuyo contenido sí está presente en el documento, como por ejemplo un párrafo. Volver

Contacto

En virtud de la Ley Orgánica 15/1999 de Protección de Datos de Carácter Personal le informo de que los datos que proporcione no serán empleados para otro fin que el de responder a su mensaje. En especial, me comprometo a no cederlos a terceros ni a emplearlos para enviar información no solicitada.

Del blog de Digital Icon

(cc) CodexExempla.org, 2007–2017 Mapa del sitio | XHTML | CSS | AA