Maquetación con divs y CSS (float)


Para realizar la maquetación de una web, actualmente, se recomienda el uso de capas (divs) modificados con estilos en vez del método antiguo del uso de tablas.

Lo que se suele hacer, es crear un div para cada elemento de la página y mediante estilos, posicionarlo y darle el tamaño y las propiedades necesarias.

Debido a que el elemento div, es un elemento de bloque, si se necesita que un elemento se ponga encima o debajo de otro, no hay mayor problema, ya que es así como se representa por defecto en los navegadores.
El problema suele venir cuando se necesita que haya dos o mas capas en la misma posición de la horizontal, por ejemplo un menú a la izquierda y a la derecha el contenido.
Para permitir esto, se suele utilizar el estilo float, que hace que el elemento "flote" a un lado u otro y cuyos valores pueden ser:

leftFlotará a la izquierda
rightFlotará a la derecha
none(Por defecto) No flotará, en el caso del div, su comportamiento de bloque hará que se muestre en toda la línea
inheritHereda la propiedad de su elemento padre


De esta forma con los valores left y right, se pueden poner 2 capas una al lado de la otra, o las que se desee, siempre que tengan espacio suficiente en la horizontal. Se pueden poner varias capas, por ejemplo alineadas a la izquierda.

En el ejemplo, se muestra una maquetación con una cabecera (fondo rojo), que no plantea mayor problema y a continuación se muestran tres elementos con dos menús y el contenido central.
Los menús tienen un float left y float right, respectivamente y deben ir siempre antes del elemento al que flotan.
Por último aparece un pie. Este tiene como estilo clear:both;, que especifica que no se admiten elementos flotantes a ningún lado de la capa (derecha o izquierda).

En el ejemplo, las capas se expanden a todo lo ancho de la página. Los estilos realmente importantes, son los "float" y el "clear", el resto como los colores, son para una representación mas visible.


Problema con anchos y altos:

Un problema que se da con esta maquetación con capas y estilos tipo float, es que en el ejemplo, si no se definiera un height en las capas flotantes y el contenido del cuerpo fuera mas "alto" que el de estas, este contenido "invadiría" la posición vertical de los "menús". Esto podría pasar con contenido dinámico y una solución podría ser poner un scroll en la capa de contenido, aunque esta solución daría diferentes resultados en diferentes resoluciones.

Otra solución, podría ser quitar todos los "height", pero se deberían definir en su lugar "width", esto daría como resultado la típica página con dos columnas vacías a los lados, debido a que lo recomendable en este caso es ajustarse a la resolución mas pequeña (se suele poner capa contenedora centrada).

Una solución más practica y menos recomendable, podría ser dejar el estilo "overflow: auto;" a la capa del cuerpo, quitándole el estilo height. Esto haría que en previsión de que pueda aparecer una barra de scroll el navegador (probado en I.E., Chrome y F.F.) no deforme la caja hacia la posición donde se encontraban los menús, además de que al no tener un alto definido, nunca tendría scroll, ya que crecería con el contenido.
Esto no es recomendable, ya que además de depender de la interpretación del navegador, es una utilización incorrecta de un estilo, por lo que podría cambiar en cualquier momento.

Una solución recomendada es la maquetación con divs y CSS (margin y position absolute), que aunque hace la maquetación un poco mas complicada al principio, por tener que calcular posiciones, si es valida en todos los sentidos.


Código:
<!-- Copyright © McAnam.com -->
<!-- http://www.mcanam.com/articulos/Estilos.php?id=6 -->

<style type="text/css">
    
    div#cabecera{
        background-color:red;
        height: 150px;
    }
    
    div#menu_izq{
        background-color:green;
        width: 200px;
        height: 350px;
        
        float:left;
    }
    
    div#menu_der{
        background-color:green;
        width: 200px;
        height: 350px;
        
        float:right;
    }
    
    div#cuerpo{
        background-color:blue;
        height: 350px;

        overflow: auto;
    }
    
    div#pie{
        background-color:yellow;
        height: 100px;
        
        clear:both;
    }

</style>


<div id="cabecera">CABECERA</div>
<div id="menu_izq">
    Menú <br />
    Menú <br />
    Menú <br />
    Menú <br />
    Menú <br />
</div>
<div id="menu_der">
    Menú <br />
    Menú <br />
    Menú <br />
    Menú <br />
    Menú <br />
</div>

<div id="cuerpo">
    
    Cuerpo <br />
    Cuerpo <br />
    
</div>

<div id="pie">
    
    PIE <br />
    
</div>

Demostración:
CABECERA
Cuerpo
Cuerpo
PIE

Links relacionados:
Maquetación con divs y CSS (margin y position absolute)
Controlar el desbordamiento en una etiqueta
Mostrar capas con formato de tabla
Como usar los estilos
Aplicar los estilos a diferentes dispositivos
Cargar frame padre de una página automáticamente (JavaScript)
Cargar varios frames con un solo link


Para cualquier duda, consulta, sugerencia, opinión, colaboración, etc; no dude en ponerse en contacto con nosotros

Copyright © 2002-2017 [McAnam]. Reservados todos los derechos.
www.mcanam.com