Maquetación con divs y CSS (margin y position absolute)


Una opción para maquetar la web con capas mediante el uso de estilos float puede ser controlando las posiciones mediante los márgenes y posicionando de forma absoluta las capas.

Esta opción permite solucionar el problema de establecer tamaños fijos en todas las capas, lo que dependiendo la resolución del usuario, podría hacer que apareciesen grandes márgenes vacíos o scrolls incómodos.

La forma de hacerlo es posicionando todas las capas menos la principal de forma absoluta. Estas capas como la cabecera o los menús, suelen tener tamaños definidos, por lo que, lo que se hace es darle un margen a la capa principal equivalente a estas otras capas.

En el ejemplo, se crea una cabecera y dos menús, uno a la izquierda y otro a la derecha, todas estas capas tienen tamaños definidos (podrían cambiarse) y posición absoluta:
  • La cabecera, tiene un tamaño de 150 píxeles de alto y se ha posicionado en las coordenadas 0,0
  • El menú de la izquierda, tiene un tamaño de 200 píxeles de ancho y se ha posicionado en las coordenadas en las posiciones "left" 0 y "top" 150 píxeles (lo mismo que la cabecera).
  • El menú de la derecha, tiene un tamaño de 100 píxeles de ancho y se ha posicionado en las coordenadas en las posiciones "right" 0 (para alinearse a la derecha) y "top" 150 píxeles (lo mismo que la cabecera).

A la capa "cuerpo", se le han dado los márgenes para que las capas anteriores no tapen el contenido, es decir 150 píxeles arriba, 200 píxeles a la izquierda y 100 a la derecha, además se ha establecido un alto mínimo para que la capa del pie no se superponga con las capas de los menús.

Por último la capa del pie, no necesita de ningún estilo en especial.

Ver ejemplo en una pantalla nueva

Con lo explicado aquí y en Maquetación con divs y CSS (float), se debería poder maquetar cualquier diseño de forma eficiente combinando las diferentes posibilidades de ambos artículos (float, margin, left, top, right, ...).


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

<style type="text/css">
    
    body{
        margin:0px;
    }
    
    div#cuerpo{
        background-color:pink;
        
        margin-top: 150px;
        margin-left: 200px;
        margin-right: 100px;
        min-height:400px;
        
    }
    
    div#cabecera{
        background-color:red;
        
        position:absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 150px;
    }
    
    div#menu_izq{
        background-color:blue;
        
        position:absolute;
        top: 150px;
        left: 0px;
        width: 200px;
        height: 300px;
    }
    
    div#menu_der{
        background-color:blue;
        
        position:absolute;
        top: 150px;
        right: 0px;
        width: 100px;
        height: 400px;
    }
    
    div#pie{
        background-color:yellow;
        height: 100px;
    }
    

</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>

Links relacionados:
Maquetación con divs y CSS (float)
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