CancelImage Upload

How to hide unnecessary horizontal scroll bars using CSS

Horizontal scroll bars, when not required, are one of the most annoying elements a web designer can bump into. And while usually they can be resolved with some careful HTML and CSS programming, sometimes they appear to be un-avoidable. Especially with layouts that require embedding pages via Frames.

Indeed, frames are not as often required in today's internet as they used to be. Or rather they are now only used for their originally designed purpose, and not implemented in every possible location as during the 90s. Here then is one method through which horizontal scroll bars can be hidden, by using the CSS command overflow:

body {
overflow-x: hidden;

In case you have not come across the command overflow before, the alternative is to set it to scroll, which is not what we want in this instance. Here is a more extended example using a div that forces the overflow:

<title>How to hide unnecessary horizontal scroll bars using CSS</title>

body {
overflow-x: hidden;

div {


<div>Really long div.</div>

So, what is the catch? Well, while the above solution works fine on IE, Netscape, Safari and Google Chrome, one browser always has to dance out of line. In this case it is Opera, which chooses not to understand the term overflow-x. Instead the only way to prevent horizontal scroll bars on Opera is to prevent scroll bars entierely:

body {
overflow: hidden;

This solution would of course mean waving goodbye to your vertical scroll bar, which depending on your layout could still be required. Let's face it, when is a vertical scroll bar ever not required? Users could always shrink their browsers down to a size where one is needed! So I'll let you make up your own mind on this subject;-)!

Want to leave a comment?

No problem. Just enter your email and password below.

register | home | reminder

myDesignTool Networking •