HTML-Layout: Hinzufügen einer Seitenleistenspalte zu einer vorhandenen Site
Ich habe eine Site mit einem Körper, der so aussieht:
<body>
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</body>
Dabei werden keine absoluten / relativen Positioniertricks verwendetdivs, aber es gibt vielefloats,clears,margins undpaddings in Stilen von diesendivs und ihre inneren Elemente. All dies ergibt eine Site, die so aussieht:
┌───────────────┐
│ header │
└───────────────┘
┌───────────────┐
│ content │
└───────────────┘
┌───────────────┐
│ footer │
└───────────────┘
Meine Frage ist: Wie füge ich eine unabhängige linke Spalte mit fester Breite (Seitenleiste) mit zusätzlichem Inhalt hinzu, der die gesamte Site verkleinert (Kopfzeile, Inhalt, Fußzeile) und nach rechts verschiebt?
┌────┐┌─────────┐
│side││ header │
│bar │└─────────┘
│ │┌─────────┐
│ ││ content │
│ │└─────────┘
│ │┌─────────┐
│ ││ footer │
└────┘└─────────┘
Ich kenne eine fast ideale Lösung, aber sie ist hässlich und erfordert das erneute Verschachteln vorhandener divs:
<body>
<table>
<tr>
<td id="sidebar">...</td>
<td>
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</td>
</tr>
</table>
</body>
Ist es möglich, dies elegant zu tun, indem nur ein externes Seitenleistenelement irgendwo im Körper hinzugefügt wird, d. H. So?
<body>
<div id="sidebar">...</div>
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</body>
Ich habe naive Ansätze ausprobiert - wie zum Beispiel Styling:
#sidebar { float: left; width: 20em; }
oder
#header { margin-left: 20em; }
#content { margin-left: 20em; }
#footer { margin-left: 20em; }
Diese Art von Arbeiten, aber es bricht sobaldclear: both oderclear: left wird in Header / Content / Footer angetroffen.
Gibt es also Alternativen zur Tischlösung?