CSS 100% width but avoid scrollbar

Total Post:70


 3956  View(s)
Rate this:

Hi Everyone!

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


| - - - 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="???">
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.

  1. Re: CSS 100% width but avoid scrollbar

    Hi Lois!

    set overflow: scroll instead of overflow: auto

    that'll force a scrollbar to always appear in vertically and horizontally.


Please check, If you want to make this post sponsored

You are not a Sponsored Member. Click Here to Subscribe the Membership.