Question

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!

Answer 1

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.