How Do You Get Rid of the Horizontal Scroll Bar on a Web Page?

Add CSS to your Web page code to get rid of the horizontal scroll bar.

When you design your Web page for a larger screen resolution and your site displays on a smaller resolution, horizontal and vertical scroll bars automatically appear. Fortunately, if you prefer to get rid of just the horizontal scroll, you have the ability to do so using Cascading Style Sheets (CSS). Understand how to apply CSS to your existing HyperText Markup Language (HTML) code to enforce a rule that restricts just this bottom bar.

Instructions

1. Bring up your computer's text editor program and open the Web page document that has the horizontal scroll bar.

2. Position your cursor before the ending "</head>" element at the beginning of the file and enter the following CSS code:

   <style type="text/css">

   </style>

3. Type "body { }" between the style tags and enter "overflow-x: hidden;" between the curly brackets. To illustrate:

   body { overflow-x: hidden; }

   The body controls your whole Web page and the overflow-x attribute instructs the browser to only get rid of the horizontal bar.

4. Save your file. Your complete CSS code now looks like this:

   <style type="text/css">

   body { overflow-x: hidden; }

   </style>

Tips & Warnings

• If you want to get rid of both the horizontal and vertical scroll bars, change the "overflow-x" attribute to "overflow" like the following example:

• body { overflow: hidden; }

References

• W3Schools: CSS How To
• W3Schools: CSS3 Overflow-x Property

Resources

• Quackit: Hide Scrollbar
• World Wide Web Consortium (W3C): Starting with HTML + CSS
• HTML Dog: CSS Beginner Tutorial