Układ HTML: dodawanie kolumny paska bocznego do istniejącej witryny
Mam witrynę z treścią, która wygląda tak:
<body>
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</body>
Nie stosuje się w nich żadnych sztuczek pozycjonowania bezwzględnego / względnegodivs, ale jest ich dużofloats,clears,margins ipaddingw tych stylachdivs i ich wewnętrzne elementy. Wszystko to daje stronę, która wygląda tak:
┌───────────────┐
│ header │
└───────────────┘
┌───────────────┐
│ content │
└───────────────┘
┌───────────────┐
│ footer │
└───────────────┘
Moje pytanie brzmi: jak dodać jedną niezależną lewą kolumnę o stałej szerokości (pasek boczny) z dodatkową treścią, która zawarłaby całą witrynę (nagłówek-treść-stopka) i przesunęła je w prawo.
┌────┐┌─────────┐
│side││ header │
│bar │└─────────┘
│ │┌─────────┐
│ ││ content │
│ │└─────────┘
│ │┌─────────┐
│ ││ footer │
└────┘└─────────┘
Znam jedno niemal idealne rozwiązanie, ale jest ono brzydkie i wymaga ponownego zagnieżdżenia istniejących div:
<body>
<table>
<tr>
<td id="sidebar">...</td>
<td>
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</td>
</tr>
</table>
</body>
Czy można to zrobić elegancko, po prostu dodając jeden zewnętrzny element paska bocznego gdzieś w ciele, tj. W ten sposób?
<body>
<div id="sidebar">...</div>
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</body>
Próbowałem podejść naiwnych - takich jak stylizacja:
#sidebar { float: left; width: 20em; }
lub
#header { margin-left: 20em; }
#content { margin-left: 20em; }
#footer { margin-left: 20em; }
Ten rodzaj działa, ale zrywa tak szybkoclear: both lubclear: left występuje w nagłówku / treści / stopce.
Czy są jakieś alternatywy dla rozwiązania tabeli?