Posicionamiento CSS

Flotar con CSS

La propiedad float ayuda posicionar los elementos que forman bloques o cajas dentro de la estructura del diseño web, con el se puede generar dos, tres o más columnas, flotar imágenes rodeadas de texto.

Flotando dos bloques

Generando dos bloques sin la propiedad Float

Generamos dos cuadros o cajas, añadimos ancho, alto y un color de fondo para diferenciarlos.

<div class="cuadro1">cuadro1 ...</div>
<div class="cuadro2">cuadro2 ...</div>

.cuadro1 {height:250px;width:290px;
          background-color:#FF8000;
          color:#ffffff;}
.cuadro2 {height:250px;width:290px;
          background-color:#0000FF;
          color:#ffffff;}

Como podras ver la segunda caja se desplaza hacia abajo.

Agregando la propiedad Float

Es momento de utilizar la propiedad float, para que la segunda caja permanezca al costado de la primera.

<div class="cuadro1">cuadro1 ...</div>
<div class="cuadro2">cuadro2 ...</div>

.cuadro1 {height:250px;width:290px;
          float:left;
          background-color:#FF8000;
          color:#ffffff;}
.cuadro2 {height:250px;width:290px;
          float:left;
          background-color:#0000FF;
          color:#FFFFFF;}

Esta vez la segunda caja flota al costado de la primera consiguiendo posicionar los bloques mediante la propiedad float.

Ejercicios propuestos con la propiedad float

Modifique el valor de la propiedad float del .cuadro2y cambie el valor left por right.

.cuadro1 {height:250px;width:290px;
          float:left;
          background-color:#FF8000;
          color:#ffffff;}
.cuadro2 {height:250px;width:290px;
          float:right;
          background-color:#0000FF;
          color:#FFFFFF;}

Modifique los valores de la propiedad float; Valor right para .cuadro1 y valor left para .cuadro2

.cuadro1 {height:250px;width:290px;
          float:right;
          background-color:#FF8000;
          color:#ffffff;}
.cuadro2 {height:250px;width:290px;
          float:left;
          background-color:#0000FF;
          color:#FFFFFF;}