Diseño HTML: agregar la columna de la barra lateral al sitio existente
Tengo un sitio con un cuerpo que se parece a eso:
<body>
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</body>
No se utilizan trucos de posicionamiento absoluto / relativo en estosdivs, pero hay un montón defloatsclearsmargins ypaddings en estilos de estosdivs y sus elementos interiores. Todo esto produce un sitio que se ve así:
┌───────────────┐
│ header │
└───────────────┘
┌───────────────┐
│ content │
└───────────────┘
┌───────────────┐
│ footer │
└───────────────┘
Mi pregunta es: ¿cómo agrego una columna izquierda independiente de ancho fijo (barra lateral) con contenido adicional que podría contraer todo el sitio (encabezado-contenido-pie de página) y desplazarlos hacia la derecha?
┌────┐┌─────────┐
│side││ header │
│bar │└─────────┘
│ │┌─────────┐
│ ││ content │
│ │└─────────┘
│ │┌─────────┐
│ ││ footer │
└────┘└─────────┘
Sé de una solución casi ideal, pero es fea y requiere volver a anidar divs existentes:
<body>
<table>
<tr>
<td id="sidebar">...</td>
<td>
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</td>
</tr>
</table>
</body>
¿Es posible hacerlo con elegancia, simplemente agregando un elemento de barra lateral externa en algún lugar del cuerpo, es decir, así?
<body>
<div id="sidebar">...</div>
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</body>
He intentado enfoques ingenuos, como el estilo:
#sidebar { float: left; width: 20em; }
o
#header { margin-left: 20em; }
#content { margin-left: 20em; }
#footer { margin-left: 20em; }
Este tipo de obras, pero se rompe tan pronto.clear: both oclear: left se encuentra en el encabezado / contenido / pie de página.
Entonces, ¿hay alternativas a la solución de mesa?