Unidad 18. Diseño de página. Maquetación web (VI)


18.7. Posicionamiento flotante

El posicionamiento flotante es un poco distinto al resto. Para empezar, no se define con la propiedad position, si no con la propiedad float. Puede tomar estos valores:

En Dreamweaver, encontramos esta propiedad junto a las propiedades de Cuadro en el Editor CSS:

En el Diseñador de CSS, esta propiedad se encuentra en la sección Diseño del subpanel Propiedades. Sus opciones, left, right y none se representan como iconos, como puedes ver aquí.

Lo que hace este posicionamiento es desplazar el elemento todo lo que pueda hacia la dirección indicada, hasta encontrar el límite del elemento contenedor, u otro elemento también flotante. Además hace que todos los elementos fluyan alrededor de él.

Es muy común utilizarlo en imágenes, para que el texto fluya alrededor de ellas. En el siguiente ejemplo, todas las cajas contienen un párrafo con una imagen al principio (<p><img /> Texto</p>). Sólo cambia el float de la imagen.

Birrete Normal. La imagen queda en la posición inicial, aumentando el alto de la línea, y no aparecen varias líneas de texto junto a la imagen.

Birrete Derecha. La imagen está en la misma posición, pero con un float: right;. Esto permite que aparezcan varias líneas de texto junto a la imagen, y cuando llegue al final, que continúe por debajo, rebasando la imagen. Así, la imagen se integra mejor en el documento.

Birrete Izquierda. La imagen está en la misma posición, pero con un float: left;. Esto permite que aparezcan varias líneas de texto junto a la imagen, y cuando llegue al final, que continúe por debajo, rebasando la imagen. Así, la imagen se integra mejor en el documento.

Observa que el texto puede quedar demasiado pegado a la imagen. Para solucionarlo, no hay más que aplicar un pequeño margin a la imagen, hacia el lado que está el texto.

Existen algunos inconvenientes al utilizar el posicionamiento flotante. Un elemento que contiene a otro flotante, no lo tiene en cuenta para su tamaño a lo alto. Por ejemplo, el siguiente párrafo tiene un borde, y vemos que si la imagen es flotante, "se sale".

Birrete Normal. El párrafo se ajusta a la imagen y el texto.

Birrete Derecha. El párrafo sólo ajusta su alto al texto.

Además, si por ejemplo hay varios párrafos con elementos flotantes al mismo lado, hace que se "amontonen":

Birrete Normal. Primer párrafo.

Birrete Normal. Segundo párrafo.

Birrete Derecha. Primer párrafo

Birrete Derecha. Segundo párrafo.

 

Para solucionar esto, disponemos de la propiedad clear, que rompe el flotamiento. Puede tomar tres valores:

En el Diseñador CSS, los valores de la propiedad clear también se establecen a través de iconos.

En el siguiente ejemplo, utilizamos el mismo que en el ejemplo anterior, pero al segundo párrafo le hemos dado la propiedad de estilo clear: right;.

Birrete Derecha. Primer párrafo

Birrete Derecha. Segundo párrafo.

Con el posicionamiento flotante, podemos por ejemplo colocar elementos uno al lado del otro. En el siguiente ejemplo, hemos utilizado capas, todas con float:left; y un pequeño margen para que no se peguen. Observa cómo se comportan cuando cambias el tamaño de la ventana:

De forma muy parecida, podemos utilizar el posicionamiento flotante para crear columnas en un documento. Basta con que la suma del ancho de las capas que harán de columnas quepa en el ancho de elemento contenedor, y que tengan posicionamiento flotante. En Internet Explorer, si la suma de los anchos es del 100%, para algunos tamaños de ventana no cabe, por lo que mostrará una columna debajo de la otra, aunque esto sólo ocurre a veces. Por eso, cuando utilizamos porcentajes es mejor utilizar un ancho total un poco menor, por ejemplo del 99% o 99.5%.

De acuerdo con lo que hemos dicho, podemos dividir un elemento en dos columnas de la siguiente manera:

   div#columna_izquierda {
     float: left;	    
     width: 30%;
     height: 100%;
     background-color:SandyBrown;
    }
   div#columna_derecha {
     float: left;	    
     width: 69.5%;
     height: 100%;
     background-color:LightGreen;
    }
 

Observa cómo se representan en el Diseñador de CSS el conjunto de propiedades de las columnas derecha e izquierda.

  

Para añadir una cabecera al principio, no hay más que poner una capa antes de las columnas, con todo el ancho. Y para poner un pie, haríamos lo mismo, pero colocándolo después de las columnas, y rompiendo el flotamiento con clear:both;.

   div#cabecera {    
     width: 99.5%;
     height: 10%;
     background-color:RoyalBlue;
    }
   div#columna_izquierda {
     float: left;	    
     width: 30%;
     height: 80%;
     background-color:SandyBrown;
    }
   div#columna_derecha {
     float: left;	    
     width: 69.5%;
     height: 80%;
     background-color:LightGreen;
    }
   div#pie {
     clear: both;
     width: 99.5%;
     height: 10%;
     background-color:Violet;
    }

La principal diferencia con el posicionamiento absoluto es que al flotante sí le afectan los márgenes, propios y del elemento contenedor, y que no estamos obligados a definir el alto. En el ejemplo anterior, hemos establecido el alto porque no hay contenido, pero si no lo especificamos, el alto se ajustaría al contenido del elemento.

La maquetación más común es la que se realiza con elementos flotantes.


Marzo-2015
Pág. 18.6
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.