CSS 100% width but avoid scrollbar

Question

This is probably a variation on something that has been solved dozens of times but CSS really makes me feel like a fool.

I am trying to build a widget that can be positioned and sized in a variety of ways. It's a pretty simple layout - fixed-height header, fixed-height footer, and a body that takes up the remaining space. The overall width and height varies. The content of the body needs to scroll. I have the overall container, header, footer, and body sizing ok.

But what I want is for the body to scroll when it needs to WITHOUT shrinking content to the left when the scrollbar appears. That is, I want the body to be as wide as it can MINUS the scrollbar that would be there iF it needed to scroll, so that when it DOES need to scroll there is no shrink. In effect, I want this:

| - - - unknown width - - -|
+--------------------------+
| content                |*|
| might                  |*|
| scroll                 |*|
+--------------------------+

I want the content that might scroll to be as wide as it can MINUS the potential scrollbar width (|*| region).

What I have now is something like this:

<div id="content" style="position: absolute; overflow-y: auto; width: 100%">
    <div id="scrollContent" style="???">
    </div>
</div>

I have tried margins, padding, even %-widths for the inner-most div and all 'do the shift' thing. I also need this to work in FF3, IE7/8 and (fantasy?) IE6.

Answer 1

Why not displaying always the scrollbars, even when there is no need to scroll?

You can achieve this by setting overflow:scroll; to the container.

Answer 2

Use overflow: scroll instead of overflow: auto - that'll force a scrollbar to always appear.

Answer 3

Add another wrapper inside the element that will have the overflow:auto style and set it to about 18px narrower. The scrollbar should appear in that 18px gap.