Uso de la propiedad float
Vamos a ver una propiedad CSS muy interesante que se ha usado muchísimo en el desarrollo web para
conseguir diseños con contenidos en columnas. O de manera más general, para conseguir colocar elementos
de bloque uno al lado de otro.
Se trata de la propiedad float, que como indica su nombre, permite que los elementos "floten" en
el diseño modificando su posición predeterminada en el flujo del documento.
Sus valores posibles son left, right, none y diferentes variaciones sobre estos. Y básicamente
significan que los elementos se apilen a la izquierda unos de otros, a la derecha, o que no lo hagan
(comportamiento predeterminado de HTML).
Comportamiento predeterminado de los bloques
En este div incluimos algo de texto para comprobar como la altura del div es calculada
por el navegador, en función de su contenido.
Al redimensionar la ventana del navegador y hacerla más pequeña, vemos como el div va cambiando de
altura para conseguir que todo el contenido quede dentro de él.
Este comportamiento deja de funcionar en el momento en que asignamos un valor de altura al
contenedor.
Texto de relleno:
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Texto alrededor de las imágenes
Las imágenes son elementos en línea, eso quiere decir que si combinamos en un mismo contenedor texto,
dentro de un elemento <p> por ejemplo, y una imagen, esta aparecerá en la misma línea de
texto, junto a él. Pero eso no quiere decir que todo el texto rodee la imagen, sino que sólo la línea
donde se encuentra la imagen está junto a ella.
Para solucionarlo solamente tenemos que aplicar a la imagen la propiedad float: left; para
que la imagen quede a la izquierda del contenedor y el texto se quede pegado al lado derecho de la
imagen, rodeándola por completo. Si queremos que quede igual pero por el lado izquierdo, aplicaremos
float:right;
Cómo hacer un diseño en columnas
En este ejemplo vamos a ver cómo conseguir un efecto de columnas combinando bloques HTML. Se trata de
aplicar a los elementos que queremos que queden uno al lado de otro la propiedad CSS float, que
permite que un bloque quede al lado de otro siempre y cuando sus anchuras respectivas lo permitan. Es
decir, la suma de las anchuras de todos los elementos que floten (y sus márgenes si los tienen) no puede
ser superior al 100% del contenedor. Porque en ese caso los elementos que sobrepasan esa anchura caen
debajo en la siguiente línea libre.
El principal inconveniente que tiene este método es que los elementos flotantes pierden la información de
su altura de caja, y por lo tanto el navegador le asigna al contenedor de estos elementos una altura
igual a cero. Eso, entre otras cosas, provoca que los elementos que se encuentran debajo del contenedor
de las columnas en el html, suban y se "cuelen" entre los huecos de los elementos de las columnas.
Para solucionarlo, tenemos que forzar que el navegador calcule la altura del elemento que contiene las
columnas. A día de hoy la forma más sencilla de conseguirlo es declarando en su CSS la propiedad
overflow con cualquier valor, aunque el que menos interferirá en nuestro diseño suele ser
auto.
Ejemplo
Columna izquierda
Esta columna y la derecha miden un 20% del contenedor. La columna central mide un 58% y tiene
un margen izquierdo y derecho de 1%.
20% + 1% + 48% +1% + 30% = 100%
Cuerpo central
HTML del ejemplo
<div class="cont-ejem">
<header class="cab-ejem">
<h3>Título del Sitio</h3>
</header>
<section class="centro-ejem">
<section class="columna" id="col_izq">
<h4>Columna izquierda</h4>
</section>
<main class="columna" id="col_cent">
<h4>Cuerpo central</h4>
</main>
<section class="columna" id="col_dcha">
<h4>Columna derecha</h4>
</section>
</section>
<footer class="pie-ejem">
<h4>Zona pie de página</h4>
</footer>
</div>
Columna derecha
CSS del Ejemplo
.cont-ejem {
border: 1px solid cadetblue;
}
.cab-ejem {
background-color: blanchedalmond;
padding: 2rem;
}
.centro-ejem {
background-color: aliceblue;
overflow: auto;
padding: 1rem;
}
.pie-ejem {
background-color: beige;
padding: 1rem;
margin: 1rem 0;
}
.columna {
border: 1px solid;
float: left;
padding: 1rem;
min-height: 700px;
background-color: whitesmoke;
width: 20%;
}
#col_dcha {
width: 30%;
}
#col_cent {
width: 48%;
margin: 0 1%;
}