maquetacion css fija y líquida

by cristian_cena

HTML

<!-- ---------------------
MAQUETACIÓN FIJA Y LÍQUIDA
---------------------- -->

<div id="contenedorFijo">
    <h1>
        Maquetación fija
    </h1>
    <h2>
        El width de una maqueta fija debe ser dado en px (píxeles)
    </h2>
    <p>
         Una medida standard puede ser 960px si consideras que tu resolución mínima parte de un monitor de 1024px de ancho.  O bien puedes hacerlo de 760px si partes de un monitor de 800px de ancho.
    </p>
</div>

<div id="contenedorLiquido">
    <h1>
        Maquetación líquida
    </h1>
    <h2>
        El width de una maqueta líquida debe ser dado en % (porcentaje)
    </h2>
</div>

<div id="liquido">
    <div id="fijo"> contenedor líquido y contenido fijo</div>
</div>

<!--
Finalmente están las maquetas "elásticas" que usan como unidad de medida "em" (en lugar de px o %). Sinceramente nunca las he trabajado por no encontrarlas aún útiles en mis proyectos. 
Pero aquí un artículo sobre el tema: http://www.100px.com/articulos/ni_fijo_ni_liquido_elastico 
-->

CSS

/*general*/
h1, h2 {font-size:2em; font-weight:bold;} h2{font-size:1.5em;}

/*layout*/
#contenedorFijo{
width:250px;
background:#c8c8c8;
margin:0 auto; /*si quieres que se centre horizontalmente*/
}

#contenedorLiquido{
width:70%;
background:#04B4AE;
margin:0 auto; /*si quieres que se centre horizontalmente*/
}              /*luego damos width con % también a sus elementos anidados*/


/* usamos fijo y líquido */
#liquido{
width:100%;
background:black;
}
#fijo{
width:250px;
background:gray;
margin:0 auto;
}