У меня есть сайт с телом, который выглядит так:
<body>
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</body>
В этих div
s не используются абсолютные/относительные трюки позиционирования, но в стилях этих div
есть много float
s, clear
s, margin
и padding
и их внутренние элементы. Все это дает сайт, который выглядит так:
┌───────────────┐
│ 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
встречается в заголовке/контенте/нижнем колонтитуле.
Итак, есть ли альтернативы решению таблицы?