Ni fijo, ni líquido. Elástico - Un poco de código

Un ejemplo muy básico sería algo como:

CSS para pegar dentro del HEAD.


<style type="text/css">
body {
  font-size: 100%;
}
h1 {
  text-size: 2.5em;
}
#contenido {
  text-size: .85em;
  width: 30em;
  background-color: #f0f0f0;
}
</style>


HTML para pegar dentro del BODY.


<h1>Mi demo</h1>
<div id="contenido">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed nec est sit amet wisi ultricies aliquam. Nulla mollis sodales diam. Duis enim purus, gravida at, varius sed, egestas sit amet, ligula. Sed est neque, ultricies ut, fermentum id, congue sed, magna. Ut sed velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam placerat orci a ipsum. Morbi sed augue vitae arcu porta consectetuer. Sed sit amet quam et elit nonummy elementum. Suspendisse auctor leo ut wisi. Pellentesque vehicula venenatis lorem. Pellentesque tincidunt dolor at urna rutrum egestas.</p>
</div>


Como se puede ver en el ejemplo, el concepto es muy simple y una vez comprendido no es demasiado distinto del uso de píxeles para definir anchos.

También tenemos un ejemplo más complejo, con una **diagramación a dos columnas con encabezado y pié**∞. Éste ejemplo puede ser alineado a la izquierda o centrado en la ventana y puede tener la columna de extras a la izquierda o la derecha mediante un intercambiador de estilos que está en la misma columna. Nótese que el XHTML no cambia en nada, solo cambian los estilos (que están brevemente comentados en el mismo CSS). Vamos, que ya no hay excusas para no usarlo ;)