My dev site: http://drupal.hoperenews.org

The horizontal scrollbar won't go away, even though the site is centering properly in the browser window. I tried overflow-x: hidden, but it hasn't had any effect. I tried Firebug, but I can't figure out what element is causing the problem. I'm not using the Overlay module (which I saw was causing similar problems for other people), and it's appearing on all content types.

The site is for a client who doesn't like the scrollbar, so any suggestions would be greatly appreciated.

Thanks!
~gttygrl

Comments

silverwing’s picture

Using Firefox and firebug (or developers toolkit) it looks like #donate padding is way off - I believe that's where your problem is. You can either span it and float it left or adjust the padding.

~silverwing

gttygrl’s picture

That's a left padding, though, not a right. It's putting space between the donate button and the logo on the left, so it shouldn't be affecting what's going on to the right, which is where all the extra space is appearing.

gjangelo’s picture

....and just hovered over block-level elements until I found that the div with the id="top_margin" was causing the problem.

#top_margin {
	width: 1024px;   <--- here's your problem
	margin-left: 750px;
	padding-right: 84px;
	margin-top: 0;
	height: 45px;
}
vitthal’s picture

Make a small change as below: -

#header {
background-color:#FFFFFF;
height:178px;
overflow:visible;
}


to 

#header {
background-color:#FFFFFF;
height:178px;
overflow:hidden;
}

here overflow:visible is made to overflow:hidden and your problem will be solved.

Many Thanks
Vitthal Roonwal