HTML-макет: добавление колонки боковой панели к существующему сайту
У меня есть сайт с телом, которое выглядит так:
<body>
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</body>
Никакие трюки абсолютного / относительного позиционирования не используются в этихdiv
с, но есть многоfloat
s,clear
s,margin
с иpadding
с в стилях этихdiv
и их внутренние элементы. Все это дает сайт, который выглядит так:
┌───────────────┐
│ header │
└───────────────┘
┌───────────────┐
│ content │
└───────────────┘
┌───────────────┐
│ footer │
└───────────────┘
Мой вопрос: как мне добавить один независимый левый столбец фиксированной ширины (боковую панель) с дополнительным контентом, который бы сокращал весь сайт (header-content-footer) и сдвигал их вправо.
┌────┐┌─────────┐
│side││ header │
│bar │└─────────┘
│ │┌─────────┐
│ ││ content │
│ │└─────────┘
│ │┌─────────┐
│ ││ footer │
└────┘└─────────┘
Я знаю одно почти идеальное решение, но оно уродливо и требует повторного вложения существующих 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>
Можно ли сделать это элегантно, просто добавив один внешний элемент боковой панели где-нибудь в теле, то есть, вот так?
<body>
<div id="sidebar">...</div>
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</body>
Я пробовал наивные подходы - такие как стиль:
#sidebar { float: left; width: 20em; }
или же
#header { margin-left: 20em; }
#content { margin-left: 20em; }
#footer { margin-left: 20em; }
Этот вид работает, но он ломается, как толькоclear: both
или жеclear: left
встречается в заголовке / содержимом / нижнем колонтитуле.
Итак, есть ли альтернативы настольному решению?