Question

My page didn’t require a horizontal scroll bar initially, but now one appears mysteriously that is beyond any of the elements that are covered on inspect on Chrome and firebug. No elements pass that blue line so I’m not sure how to fix this.

I know I can hide the scrollbar with overflow-y:hidden, but that’s not the point. It shouldn’t be there at all.

EDIT Here’s the jsfiddle: http://jsfiddle.net/S8RUp/
A bit messy, but I think it gets the point across.

Answer 1

The jsFiddle link has too many overflowing contents to be useful. What you can do to ease debugging is to use a bit of code like this to show you only elements that are over a threshold width:

// using jQuery - you can use other library or include it temporarily for debugging purposes
$('*').each(function() {
    var w = parseInt($(this).width(), 10);
    // you can put something larger than 700, depending on your situation
    if (w > 700) {
        console.log(w, this);
    }
});

It will have a few false positives (the html node for example), but you’ll probably find the culprit easily enough.