HTML-макет: добавление колонки боковой панели к существующему сайту

У меня есть сайт с телом, которое выглядит так:

<body>
  <div id="header">...</div>
  <div id="content">...</div>
  <div id="footer">...</div>
</body>

Никакие трюки абсолютного / относительного позиционирования не используются в этихdivс, но есть многоfloats,clears,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 встречается в заголовке / содержимом / нижнем колонтитуле.

Итак, есть ли альтернативы настольному решению?

Ответы на вопрос(3)

Ваш ответ на вопрос