Más sobre estilos CSS: Float y clear

Cuando recién empezamos a crear páginas web usando hojas de estilo nos cuesta entender de qué manera acomodar los diferentes DIVs en la pantalla.

Aquí creé una página de ejemplo que tiene dos divs, todavía sin float ni clear:

<div id=”izquierda”>
<p>Ingredientes</p>
<ul><li>Tapa para pascualina</li>
…
</div>

<div id=”contenido”>
<h1>Tarta de Jamón y queso</h1>
<p>Encender el horno</p>
…

</div>

 

Bajar el código del ejemplo

Para que el ejemplo se vea más claramente, al segundo div se le determinó un ancho fijo (usando la unidad de medida em):

width: 25em;

Empecemos por agregar a cada uno de los dos DIVs la propiedad Float: left. Con esto le estamos diciendo que se pegue al elemento que esté a la izquierda, ocupando el espacio libre que este elemento dejó a su derecha. Por lo tanto, si a los dos DIVs les ponemos como propiedad float: left, el resultado será que el primero que aparezca en el código HTML se pegará sobre el borde izquierdo de la pantalla, y el segundo se pegará sobre el primero:

#izquierda
{
…
float: left;
}

#contenido
{
…
width: 25em;
float: left;
}

Para que quede más claro, voy a invertir el orden de los divs en el archivo HTML, poniendo primero el código de la receta y después el de los ingredientes. El resultado, con ambos divs flotando a la izquierda, es este:

<div id=”contenido”> … </div>
<div id=”izquierda”>…</div>

Ahora vamos a cambiar la propiedad float del div que contiene la receta. Le diremos que flote a la derecha (float: right), es decir, que se pegue al elemento que encuentre a su derecha (el borde de la página o algún otro div que esté flotando a la derecha). Como tenemos un div que flota a la izquierda y otro que flota a la derecha, el resultado será este:

En algunos casos vamos a necesitar que un DIV no contenga ningún elemento flotante a su izquierda o a su derecha. En ese caso lo que tendremos que utilizar es la propiedad Clear (despejar), cuyos valores son: none, left, right, both (ninguno, izquierda, derecha, ambos).

Más ejemplos:

Elementos flotantes (html.net)

Las propiedades ‘left’ y ‘clear’ (sidar)

Otros posts de BETA Weblog sobre accesibilidad y CSS:

¿Cómo se ve mi sitio en otros sistemas?

Imágenes en CSS

Sombras nada más… o ¿sombras en el texto de una web accesible?

Ayuda para crear hojas de estilo

Cómo saber el código de un color

Cómo saber si tu sitio es accesible