Teoría
Teoría

Columnas simuladas con degradados

Un reto interesante al maquetar una página es conseguir columnas flexibles de la misma altura sin usar tablas. En una disposición con elementos flotantes como esta, las columnas no igualan su altura automáticamente. Las imágenes muestran el problema:

Columnas flotantes con alturas diferentes Columnas que parecen tener la misma altura

Existen varias técnicas para resolverlo, que se describen en este artículo en inglés. Por cierto, las ilustraciones también están basadas en las de ese artículo.

Vamos a usar degradados con transiciones bruscas para imitar columnas que se estiran. Usaremos la palabra clave transparent para las partes transparentes del fondo. El fondo con estos degradados suele colocarse en el contenedor de las columnas. Las proporciones de los degradados se ajustan a las de las columnas para que sus fondos parezcan alcanzar la misma altura.

El efecto de este ejercicio se puede conseguir más fácilmente con flexbox.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Columnas simuladas con degradados</title> <meta charset="utf-8"> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container columns"> <div class="left"> <p>El texto de la columna izquierda tiene una longitud y el de la derecha, otra. En esta disposición con elementos flotantes, las columnas no igualan su altura automáticamente. Es una limitación de esta técnica.</p> </div> <div class="right"> <p> Pero podemos colocar detrás un fondo con los mismos colores que las columnas para crear la ilusión de que tienen la misma altura.</p> </div> </div> </body> </html>

CSS

body { font-family: "PT Sans", sans-serif; } .columns { background-image: none; } .container { margin: 20px auto; min-height: 380px; width: 300px; box-shadow: 1px 1px 3px #333333; color: white; } .container::after { display: table; clear: both; content: ""; } .left { float: left; width: 45%; background-color: #e74c3c; } .right { float: right; width: 45%; background-color: #3498db; } p { margin: 10px 0; padding: 0 10px; }

ObjetivosRealizado

Asigna a .columns un degradado lineal de izquierda a derecha con seis colores: #e74c3c, #e74c3c, transparent, transparent, #3498db, #3498db. Sí, cada color se repite dos veces.
Después, asigna al segundo y al tercer color la posición 45%, al cuarto y al quinto, 55%.
Después, aumenta el ancho de .container a 400px.
Por último, añade la clase columns a body.