Question

I’m doing some work for http://digitaleditor.com/ and I’ve run into something a tad confusing.

The web page has a horizontal scroll bar at the bottom, but I’ve been unable to figure out why. Using Google Chrome’s developer’s tools I’ve found that there are only 3 items on the entire page that exceed 960 pixels wide. The first two are html and body, the second is #hpages, however the second is only 970 pixels wide (html and body are each 1263 pixels wide). Furthermore there’s a very obvious CSS rule stretching #hpages to 970 pixels:

#hpages ul {   width:970px; float:right; }

I can find no such rule stretching the html or body elements. I tried running the following script to see if there were any elements I was simply overlooking that might be stretching the page:

javascript:widest=null;$("body *").each(function(){if(widest==null)widest=this;else if($(this).width()>$(widest).width())widest=this;});alert(widest.id);

This returned #hpages, meaning that no item is over 970 pixels wide in the body (even though the body is stretched to 1263 pixels).

There are no CSS rules affecting the width of the body element or the width of the html element.

I’m honestly just at a loss as to what is stretching the page, and I don’t know how to figure out. At this point my last resort is systematically removing items from the page until it’s resolved. I was wondering if anyone knew a better option.

Answer 1

It’s the width on the iframe in .wrapper>#page>#content>#sidebar.rightSidebar.left>center>div>#fb-root>div>div>iframe#f1c73bf2defcb8

It has an inline style of width: 575px; which is overflowing. Either fix the width or add overflow: hidden; to this div <div style="position: absolute; top: -10000px; height: 0px; width: 0px;">