In a browser window you will have two ways of scrolling the webpage content that is produced, using a vertical scroll bar also known as the y-axis scrollbar and the horizontal scrollbar also known as the x-axis (Sort of like the axis on a typical two axis graph) Depending on how a website is designed you may or may not see it, and sometimes it has been forced to appear as maybe that certain website needs it to function properly. But for some of you out there you may think "Ugh whats this annoying scrollbar doing here" and no matter how many widths you change it's determined to stay Well with this CSS Hack/Trick you will be able to hide that annoying horizontal scroll bar with a simple CSS code.

Step 1: Some examples

Okay so if your lost already I'll give you a example of the scrollbar appearing when loaded in a browser:

Notice how the website design has ended yet a scrollbar is present, It is not needed, and it's defiantly one of those tiny little errors that really annoy you when you really don't want it.

Step 2: Let's remove the scrollbar

So if you've decided that "Yeah I want this scrollbar out of my life!" then here's how you can make it disappear with a simple one line of code. First of all though, open up the main CSS Stylesheet that your website uses to control various parts of the website layout. If you dont use a external CSS document you can still use another method of placing this code. For now though if you have a external stylesheet open it up now, if not ignore that bit and continue reading.

The code to make this pesky scroll bar disappear is simple this:

html {overflow-x: hidden;}

It's a small piece of code, but it deserves some explaination of what it's doing.

We first notice that it uses it's own attribute called html, it's not a div. It's simply a pre-implemented element in browsers and this trick requires it to work. Referring back to the tutorial beginning I told you to think of the scrollbar's in x and y axis as like a typical graph is. Notice how this code uses the axis letter to specify which scrollbar the code is wanting to hide. And finally the code defines what to do with the overflow property and in this case it is telling it to hide the scrollbar.

The html part before the code however is essential for this to work. Placing it within any other attribute or div to get the effect of hiding a browsers scrollbar will not work. For ways to get this code to work on divs and other things read the next section.

Other uses of this code:

This trick can also be used on a less major scale. As well as hiding scrollbars in browsers you could also apply this code into something like a html text area. Say if you had text within this text area and it generated a horizontal or even a vertical scrollbar by default you could remove it. Here's a classic example, you have this textarea code below:

<textarea cols="45" rows="5">Text Area!</textarea>

Inputting this code automatically generates a shadowed vertical scrollbar. Annoying and not needed, removing it would simply be to adapt the current scrollbar hiding trick and implement it into the textarea code:

<textarea cols="45" rows="5" style="overflow-y:hidden;">Text Area!</textarea>

Remember we are wanting to remove the vertical scrollbar this time so our scrollbar axis is y.

This addition will remove the shadowed vertical scrollbar and leave you with a nice box. The scrollbar hiding code has to be slightly changed to be used in this way, but nothing major. You will notice that we don't require the html bit before if you were to be using this trick like so only the attribute and value are needed. This adapted code also works in divs, and can be used by using the style attribute within XHTML code or placed within the CSS of the div simply by using the adapted form:

overflow-y:hidden;

You would obviously change this code depending on what scrollbar you want to hide.

Different values of this code:

So I've shown you how this code can be used in a hack/trick way to remove things, but it can also do other things. The other values this code has are:

visible - Default. The content is not clipped. It renders outside the element
scroll - The content is clipped, but the browser displays a scroll-bar to see the rest of the content
auto - If the content is clipped, the browser should display a scroll-bar to see the rest of the content

This value would replace where you've been shown where the hidden value goes in the code.

For users not using a external stylesheet:

Before I showed you the code I said open your websites external stylesheet as this is the easiest way to implement this trick. Now if you don't use one, then you can simply place this fix into your XHTML documents like so:

<style type="text/css">
html {overflow-x:hidden;}
</style>

You would place this code within any XHTML document you want to hide the scrollbar on. And it goes between the head tags of your XHTML document. But because you will have to place this code into your XHTML documents multiple times this is why a stylesheet is useful as you would only need to place it in once as a stylesheet is included when a browser parses a webpage.

Important note about this hack/trick:

While this little code does do it's job well, I must warn you that this hack/trick is not recongised in earlier versions in CSS. Meaning if you validate your CSS document with this code inplace it may tell you that the overflow attribute is not supported in earlier versions of CSS. From checking validation results this code seems to not be valid in CSS Version 2.1 but valid in CSS Version 3.

Well I hope this tutorial has showed you a easier way of making a scrollbar disappear!