CSS Hacks: Removing the horizontal scroll bar

Sometimes when you've coded up your website in CSS no matter what width fixes you try you'll still see that horrible horizontal scrollbar on your website's pages. Although it is harmless and doesn't effect how your site displays (For the most part) im taking about something like this:In this text box you will see a scroll bar going across below. It is not being used so it's not really needed!

When scroll bars are needed they are acceptable but this tutorial will show you a easy way of removing it. Via using a small code in your stylesheets

overflow-x: hidden;

This code simply hides your horizontal scroll bar. Simply think of it like this. You have graph that has a Y axis and X axis. The Y axis is the vertical line the X axis is the horizontal line, simular to this your overflow-y: is your vertical scrollbar (Going down) and your overflow-x: is your horizontal scrollbar going across. You can also expand on this code by using such codes like:

overflow-x:auto;overflow-x: visible; overflow-x: scroll;

This can also be applied to the overflow-y: property

To place the code properly it needs to placed within a special part of your stylesheet:

html {overflow-x: hidden;}

This is most simpliest way to place this code into your stylesheet, however it can be placed in other CSS properties such as the body tag and general divs. However if you place the code anywhere but the html { property you need to make sure you define some sort of width/height/position/float etc.

html, body {margin: 0px; background-color:#FFFFFF; padding: 0px; overflow-x: hidden; }

Placing this hack in your pages (Not in a stylesheet)

This hack can also be used to stop scrollbars in other things such as text area's to do this you would simply use this code:

<textarea cols="35" rows="4" style="overflow-x: hidden;">No scroll bar!</textarea>

Using the code above your text box will look like this:

Look no hortizontal scroll bar!

The great thing about this small code is that it hides any horizontal scrollbar in anything HTML related as well as hiding the bottom scroll bar on your browser window!

This CSS hack isn't valid in CSS 2.1 but is valid in CSS 3. Be aware of that! Consult W3.org's CSS validators for more information on different CSS levels as well as validation on CSS, and how to make sure your using valid CSS!