--- title: "CSS 100% width but avoid scrollbar" description: "CSS 100% width but avoid scrollbar" author: "Anonymous User" published: 2013-03-12 updated: 2013-03-12 canonical: https://www.mindstick.com/forum/650/css-100-width-but-avoid-scrollbar category: "css-css3" tags: ["css-css3"] reading_time: 2 minutes --- # CSS 100% width but avoid scrollbar Hi Everyone! This is probably a [variation](https://www.mindstick.com/articles/157260/variation-between-web-designer-and-web-developer) on something that has been solved dozens of times but CSS really makes me feel like a fool. I [am trying](https://answers.mindstick.com/qa/36834/which-two-programming-languages-should-i-master-in-if-i-am-trying-to-get-into-google-or-facebook) to build a widget that can be positioned and sized in a variety of ways. It's a pretty [simple](https://yourviews.mindstick.com/story/1469/5-simple-ways-to-stay-fit-amp-healthy) layout - fixed-height [header](https://www.mindstick.com/articles/336036/explain-about-html-header-body-and-footer-tags), fixed-height footer, and a body that takes up the remaining space. The overall [width and height](https://www.mindstick.com/forum/158680/what-css-property-is-used-to-set-the-width-and-height-of-an-element) varies. The [content](https://www.mindstick.com/articles/13019/get-the-best-content-marketing-pricing-packages-for-your-brand) of the body needs to scroll. I have the overall [container](https://www.mindstick.com/forum/159610/how-to-connect-a-windows-container-to-a-service-running-on-localhost), 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](https://yourviews.mindstick.com/view/81363/coronavirus-effect-on-american-farms-is-severe), 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:
\
\
\
\ 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.\ ## Replies ### Reply by AVADHESH PATEL Hi Lois! set overflow: scroll instead of overflow: auto that'll force a scrollbar to always appear in vertically and horizontally. --- Original Source: https://www.mindstick.com/forum/650/css-100-width-but-avoid-scrollbar Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.