Question

I work on a website whose main content block is too wide to fit fully inside the smaller resolution screens.

The content is centered in the middle of the screen.

I need a horizontal scrollbar to appear when the content doesn’t fit inside the screen.

I force the horizontal scrollbar to appear with a div:

<div id="stretcher" style="width:1200px; min-width:1200px; height:1px; position:absolute; margin:0 auto"></div>

The problem: if I initially open the website in a large resolution screen (or wider window), and then make the browser window narrower, the scrollbar appears just where it’s supposed to. However – if I continue making the window narrower, the scrollbar handle stays at the left side, and scrolling further to the left becomes impossible. Also, If the browser window is initially smaller than the content, the scrollbar appears all the way to the left, and I can’t scroll more to the left to reveal the left side of the content that is hidden.

The question: how can I force the scroller to the middle, so that I can scroll left to reveal the hidden part of the content?

I would be grateful for your advice!

Answer 1

JSFiddle of my demo: http://jsfiddle.net/Y9DCs/

From what I can see, right now you have a 2 column layout:

On the left is your “access” panel that contains your menu. On the right is your main content area.

I think you may be better served to have a main container with 3 sections:

|----------------wrapper---------------------|
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|  Menu   |       Content        |   Dummy   |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|--------------------------------------------|

You can then size the width of wrapper as Content + (2 * Menu), and give it margin: 0 auto;

Menu and Dummy would be the same width, except dummy would just be a div with no content.

This will effectively size the whole area as centered on the screen with the menu appearing to hang off the left side of Content.