15

I have a strange problem, and I can't find the cause! I have the following webpage: http://uk.translation-vocabulary.com/de-german and the perceived width of the page is perhaps 300px greater than the width of the content. So a horizontal scrollbar is present even when the viewport is horizontally stretched to match the visible content.

I have been inspecting elements with Firebug, trying to find the culprit. No success so far.

This effect observed in Firefox, Safari, Chrome. Untested: IE.

Any help greatly appreciated!

Benjamin.

2
  • I've never seen someting this. Trying to figure out, hang on. Commented Sep 14, 2011 at 10:56
  • wow, this is really strange .. maybe some external widgets (Gacebook/twitter/G+ ? are causing problems ... I'm having a look too.
    – tsimbalar
    Commented Sep 14, 2011 at 10:57

2 Answers 2

18

Two ways to diagnose the culprit.

Method A

  1. Open the Chrome dev tools in the Elements tab.
  2. Expand all elements under HTML by hovering over the triangle on the left, then Ctrl+Alt click (Windows) or Option click (Mac).
  3. Hover your mouse over each element and see if it highlights inside the area on the webpage making it too wide.

Method B

  1. Open the Chrome dev tools then hit Esc to open the console.
  2. Paste in this code and hit Enter.

    var docWidth = document.documentElement.offsetWidth;
    [].forEach.call(
      document.querySelectorAll('*'),
      function(el) {
        if (el.offsetWidth > docWidth) {
          console.log(el);
        }
      }
    );
    

This will find all the elements in the page overhanging. Thanks to Chris Coyier https://css-tricks.com/findingfixing-unintended-body-overflow/

3
  • 4
    Method B only yields "undefined" Commented Feb 4, 2018 at 20:28
  • 1
    @AuntJemima that being the case, nothing is out of bounds. In the console, the code doesn't return anything, so whether you find anything or not, it will finish with the return value of 'undefined' Commented May 21, 2018 at 4:07
  • 1
    I suggest a bit different way, it gave me the array of matched elements instead of undefined - ``` var docWidth = document.documentElement.offsetWidth; [].filter.call( document.querySelectorAll('*'), function(el) { return (el.offsetWidth > docWidth) } );```
    – Kote Isaev
    Commented Nov 3, 2020 at 0:34
14

Your facebook button is causing this problem (removing the button makes the problem go away).

The facebook iframe has its width set to 575px via the style attribute, which is causing the page to be wider than 100%.

Note that you can add the CSS rule html,body{overflow-x: hidden;} to mask the problem, but instead, you should really fix that button.

1
  • 1
    Well done! I was looking at the wrong iframe. Since I can't change the style information that FB sends with the button (right?) I have overridden their style directive with a workable width: .FB_UI_Hidden { width: 200px !important;} This works.
    – popstack
    Commented Sep 14, 2011 at 16:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.