En el pasado, muchos sitios web utilizaban tablas HTML para diseñar páginas porque este método producía resultados consistentemente confiables en navegadores web más antiguos. Esta no era una solución ideal, ya que las tablas realmente pretenden mostrar datos tabulares en lugar de diseñar páginas. El uso de tablas también significó que el diseño estaba codificado en la página, por lo que la tarea de actualizar el sitio lleva más tiempo. Las hojas de estilo en cascada introdujeron la propiedad "flotante", lo que permite a los diseñadores flotar elementos hacia la izquierda o hacia la derecha. Esto permite un mayor control sobre la página y tiene la ventaja adicional de mantener el diseño del sitio separado del contenido.

1.

Abra un editor de texto o editor HTML y cree un nuevo documento HTML.

2.

Agregue el siguiente código al cuerpo de la página:

Guarda la página y ábrela en tu navegador web. Verás que el contenido en la segunda división se muestra debajo del contenido en la primera división.

3.

Inserte el siguiente código CSS en la sección de su documento HTML:

Guarde la página y actualice en su navegador para mostrar los cambios. La regla CSS apunta a ambos divs anidados dentro del div "myContainer". La propiedad "flotante" le dice al navegador que haga flotar los divs a la izquierda; puede cambiar el valor de flotación a "derecha" para que floten los divs al borde derecho del div que contiene. Los divs están configurados a un ancho fijo de 300 píxeles y tienen un borde negro de 1 píxel para que el diseño sea más fácil de ver. En su navegador, verá que los cuadros ahora se muestran uno al lado del otro.

4.

Agregue un tercer div al cuerpo de la página, fuera del div "myContainer" como se muestra a continuación:

Guarda la página y recárgala en tu navegador. Verás que la tercera div se muestra junto a la primera y la segunda div, aunque no haya flotado. Esto ocurre porque los elementos HTML restantes fluyen alrededor de los elementos flotados. Este puede ser un comportamiento deseable en algunos casos, pero en este ejemplo, queremos que el tercer div se muestre debajo de los divs flotantes para crear un pie de página.

5.

Inserte la siguiente regla en la sección de estilo en el encabezado de la página:

myFooter {

clear: both; 

}

Esto apunta al tercer div "myFooter" y le dice al navegador que suspenda el flotante y muestre los elementos HTML subsiguientes debajo del div "myContainer". Guarda y actualiza la página. Verás que el pie de página formado por el tercer div ahora se muestra debajo de los divs flotados.

Propina

• Puede usar la propiedad "margen" de CSS para crear un espacio entre divs flotantes.