CSS: Correcto uso de capas flotantes (float) con overflow

En este artículo explicamos como corregir el uso de flotantes dentro de un contenedor con la propiedad overflow

El desprestigio que adquiere un sitio al utilizar tablas como contenedores de información es conocido por todo desarrollador web que tenga un mínimo de experiencia en estandarización de código. El llamar a dichos elementos para mostrar información o imágenes únicamente para ahorrarnos unos pasos y tener alineado nuestro contenido es considerado una de las faltas más graves en la maquetación de páginas web.

Con el paso de los años la aplicación de las tablas en sitios se fue limitando de tal manera que en la actualidad la mayoría de los sitios únicamente las utilizan para mostrar datos tabulares, lo que fue y siempre será su único motivo de existencia. Gracias a esta adecuación, dichas estructuras han caído en desuso para dar formato a contenido, por lo que varios métodos para alinear y mostrar información han tenido que surgir para cumplir con esta función.

La respuesta inmediata a esta clase de problemas la podemos encontrar en el lenguaje de estilo CSS. Si bien CSS3 nos ha sorprendido con el uso de columnas múltiples en nuestros documentos, en esta ocasión nos centraremos en el uso de capas con propiedades flotantes para poder explicar nuestro ejemplo de “Overflow”.

Como es de saberse el uso de capas mediante elementos “div” se ha convertido en la forma más común y adecuada de mostrar información en nuestro sitio. A cada una de estas capas se le puede dar valores que permitan editar su tamaño, posición y estilo, por ejemplo si quisiéramos colocar dos capas con bloques de contenido en un mismo nivel de manera paralela verticalmente utilizaríamos la propiedades “float” para mandar una al lado izquierdo y otra al lado derecho.

Las capas flotantes con CSS

El problema que vamos a abarcar en el estudio de este artículo se produce precisamente al manejar dichas propiedades de flotación. Hay que aclarar que no por ello debemos discriminar a la propiedad “float”, pues es una de las maneras más adecuadas para colocar “divs” a lo largo y ancho de la página y su implementación vino a revolucionar lo que anteriormente era la maquetación y estructuración de un sitio.

Básicamente lo que ocurre al crear capas en un sitio es que un elemento “div” siempre se colocaba debajo del anterior elemento del mismo tipo, lo que hace que la información se muestre en una sola columna aunque modifiquemos el tamaño y estilo de la capa. Esto se puede evitar gracias a la propiedad “float” la cual crea el efecto necesario para que las capas estén “flotando” en la página y podamos moverlas y colocarlas a disposición.

La estructura

Por ejemplo, si suponemos que se desea tener una estructura de sitio con tres capas de presentación, una de ellas que sirva para contener toda la información y las otras dos para representar las columnas, se debe optar por manejar tres elementos de tipo div los cuales después serán adecuados mediante CSS.

<div id="contenedor">
    <div id="columnaIzq">
        <p>Soy la columna izquierda de esta página y muestro contenido</p>
    </div>
    <div id="columnaDer">
        <p>Soy la columna derecha de esta página y también muestro contenido</p>
    </div>
</div>

Como es de suponerse queremos que una de las columnas se muestre al lado izquierdo del contenedor y la otra al lado derecho, para ello debemos usar la propiedad flotadora ya mencionada y el código quedaría de la siguiente manera:

#contenedor{
    background-color: SteelBlue;
    padding:5px;
}
#columnaIzq{
    width:300px;
    float:left;
}
#columnaDer{
    width:300px;
    float:right;
}

El único problema de esta estructura es que el “div” contenedor no tiene idea de que las otras dos capas existen, puesto que las dos están flotando por encima de él, por lo que actua como un contenedor vacío y simplemente no se muestra. Si pegamos el código que acabamos de realizar en nuestra página web podremos ver que apenas se alcanza a distinguir una línea con el color “SteelBlue” de fondo, ese es nuestro “div” contenedor, por su parte las columnas se muestran pero no de la manera en que queremos.

La solución momentánea

Muchos de nosotros improvisamos y a la carrera sacamos proyectos por cuestiones de tiempo o desesperación, existen soluciones poco prácticas o incluso momentáneas que nos pueden ayudar. El uso de algún elemento al final del “div” contenedor puede ayudar a que la capa se extienda y abarque los dos elementos de columnas.

Por ejemplo podemos añadir una cierta cantidad de espacios en blanco mediante el código ” ” al final del div o de saltos de línea mediante la etiqueta ”
” hasta que el contenedor abarque lo suficiente como para obtener el resultado que queremos. O incluso vernos un poco más sofisticados y utilizar esta misma etiqueta de salto de línea pero con un atributo “clear” cuyo valor sea “all”, lo que forzará al contenedor a extenderse para mostrar el contenido, por lo que si cambiamos el código HTML a este:

<div id="contenedor">
    <div id="columnaIzq">
        <p>Soy la columna izquierda de esta página y muestro contenido</p>
    </div>
    <div id="columnaDer">
        <p>Soy la columna derecha de esta página y también muestro contenido</p>
    </div>
<br clear="all" />
</div>

El resultado puede parecer el indicado, pero quizás no sea la forma más adecuada de obtenerlo.

Overflow de CSS y capas flotantes

Si bien con el salto de línea se pudo desplegar correctamente nuestro “div” contenedor, estamos utilizando una etiqueta de contenido que no tiene más propósito que mostrar bien la estructura, por ello es mejor pensar en una solución que venga desde el diseño y no desde el contenido.

Para esta situación es cuando podemos utilizar la propiedad “overflow” que nos ofrece CSS. La principal función de dicha propiedad es permitirnos modelar las capas de tal manera que el navegador sepa cómo mostrar el contenido cuando este no puede ser colocado de manera completa, pero en esta ocasión toma una función complementaría y permite que los elementos flotantes sean reconocidos por el elemento contenedor.

Para esta función se puede utilizar cualquier valor de los permitidos para la propiedad “Overflow”, ya sea “hidden”, “scroll” o “auto”, todas funcionan, pero por cuestiones de estética optaremos en esta ocasión por el valor “hidden” que simplemente no muestra nada. Habiendo dicho esto, modificamos el código de nuestro CSS y las propiedades del div contenedor quedan de la siguiente manera:

#contenedor{
    background-color: SteelBlue;
    padding:5px;
    overflow: hidden;
}

En cuanto al código HTML, ya no será necesario usar el salto de línea por lo que podemos volver al código original mostrado en el primer ejemplo.

Finalmente debemos aclarar que este truco funciona en todos los navegadores que soportan CSS aunque en algunos casos debemos utilizar un “width” o un “height” específico.