Как отцентрировать основной div по горизонтали и оставить его слева

Question

Я ищу лучший способ сделать следующее:

--------------------------|--------------------------
|                                                   |
|    --------  -------------------------            |
|    | menu |  |                       |            |
|    |      |  |                       |            |
|    --------  |       #content        |            |
|              |                       |            |
|              |                       |            |
|              |                       |            |
|              -------------------------            |
|                                                   |
|                                                   |
--------------------------|--------------------------

Div #content центрируется по горизонтали с фиксированной шириной. Div #menu придерживается левой стороны #content.

На данный момент у меня есть оба div внутри div #wrap, ширина которого #content и margin:auto. Я позиционирую #menu абсолют и даю ему отрицательный margin-left. Но в этом случае, если окно браузера становится меньше #menu, не используется горизонтальная полоса прокрутки (что должно быть по соображениям удобства использования).

Спасибо за лучшее решение!

Answer 1

просто используйте что-то вроде этого

<div class="wrapper">

  <div id="content">
    <!-- content -->
    <div id="menu">
    <!-- menu content -->
    </div>
  </div>

</div>

Где «обертка» увеличит ширину вашего макета.все остальное то же самое, за исключением того, что я предпочитаю left: -200px например insted of margin-left: -200px;для "меню" ...

конечно, "меню" должно быть абсолютным по отношению к "контенту" и т. д. "контент" - это позиция: относительная.

Answer 2

При условии фиксированной ширины попробуйте следующее: http://jsfiddle.net/hvrzx/

Требуется один дополнительный div, но удаляется все позиционирование. Вычислите margin-left из #innerwrap, используя следующую формулу: (o+c)/2-i, где o - это ширина #outerwrap, c - это ширина #content, а i - это ширина #innerwrap .

Изменение ширины #innerwrap влияет на расстояние между #menu и #content.

Answer 3

Это работает? в листе CSS

#menu {overflow:scroll};