How to center main div horizontally and still have a div on its left

i'm looking for the best way to do the following:

--------------------------|--------------------------
|                                                   |
|    --------  -------------------------            |
|    | menu |  |                       |            |
|    |      |  |                       |            |
|    --------  |       #content        |            |
|              |                   开发者_运维技巧    |            |
|              |                       |            |
|              |                       |            |
|              -------------------------            |
|                                                   |
|                                                   |
--------------------------|--------------------------

The div #content is centered horizontally, fixed width. The div #menu sticks to the left side of #content.

At the moment i have both divs inside a div #wrap that has the width of #content and margin:auto. I position #menu absolute and give it a negative margin-left. But this way if the browser window get's smaller #menu doesn't force a horizontal-scrollbar (which it should for usability reasons).

Thanks for a better solution!

simple use something like this

<div class="wrapper">

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

</div>

Where "wrapper" will force width of your layout. everything else is the same, except that I prefer left:-200px for example insted of margin-left:-200px; for "menu"...

of course "menu" need to be absolute to "content", etc. "content" is position:relative.

Provided all widths are fixed, try this: http://jsfiddle.net/hvrzx/

It requires one additional div, but removes all positioning. Compute margin-left of #innerwrap using the following formula: (o+c)/2-i, where o is the width of #outerwrap, c is the width of #content and i is the width of #innerwrap.

Change of #innerwrap's width affects the gap between #menu and #content.

Does this work? in a css sheet

#menu {overflow:scroll};