Why horizontal scrollbar?

You think your html and css looking good and then you notice – a horizontal scrollbar when the site should not need to scroll!

Reasons for a scrollbar

They all come down to the same thing – the browser thinks it needs a bit more space…… Some situations that may trigger this perception or actual need:

  • 100% width, plus some padding makes it more than 100%!
  • 100% width, plus Italics : IE has to make it just that bit wider for the italics, perhaps forcing a horizontal scrollbar.
  • <pre> preformatted code that is wider than it’s containing element.

Using overflow just hides the problem

A number of sites will advise using the overflow property to get rid of it. That may well bandaid it and admittedly it is a quick fix.