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

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

<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 встречается в заголовке/контенте/нижнем колонтитуле.

Итак, есть ли альтернативы решению таблицы?

Ответы

Ответ 1

Мне нравится использовать абсолютно расположенную боковую панель, а затем задавать прописку на обертке по ширине этого элемента. Затем я либо устанавливаю пометку полей для других элементов, либо добавляю их в дополнение к обертке.

http://jsfiddle.net/jAVQv/

<div class="container">
    <div id="sidebar"></div>
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

.container { position:relative; padding:0 0 0 55px; }
#sidebar {
    position:absolute;
    top:0; bottom:0; left:0;
    width:50px;
    background:#000;
}

#header { border:1px solid #000; width:100px; height:20px; 
    margin:0 0 5px 0;
}
#content { border:1px solid #000; width:100px; height:50px;
    margin:5px 0 5px 0;
}
#footer { border:1px solid #000; width:100px; height:20px;
    margin:5px 0 0 0;
}

Ответ 2

Я бы использовал элементы HTML5, чтобы дать смысловое значение разметки.

<body>
  <aside><!-- Nav bar --></aside>
  <article>
    <header>...</header>
    <section>...</section>
    <footer>...</footer>
  </article>
</body>

Затем стиль aside и article с float: left.

Ответ 3

Я сделал немного jsfiddle, чтобы помочь вам начать работу. Также вы можете проверить, не содержит ли ваше содержимое div содержимое всего CSS. Надеюсь, это поможет.

Изменить: все цвета и размеры являются фиктивными, используемыми для примера. Он shookk работает с любым размером.

html:

<body>
  <div id="sidebar">...</div>
  <div id="header">
      <div id="testLeft"></div>
      <div id="testRight"></div>
      <div class="clearFix"></div>
  </div>
  <div id="content">...</div>
  <div id="footer">...</div>
</body>

css:

.clearFix {
    clear: both;
}

#sidebar {
    width: 50px;
    height: 30px;
    background-color: green;
    float: left;
}

#header {
    width: 250px;
    background-color: red;
    margin-left: 55px;
}

#testLeft {
    width: 50px;
    height: 50px;
    float: left;
    background-color: pink;
}

#testRight {
    width: 50px;
    height: 50px;
    margin-left: 55px;
    background-color: purple;
}

#content {
    width: 250px;
    height: 20px;
    background-color: blue;
    margin-left: 55px;
}

#footer {
    width: 250px;
    height: 20px;
    background-color: orange;
    margin-left: 55px;
}