View Full Version : Why does my site have a horizontal scrollbar?

Sep 21st, 2010, 10:55 PM
I just noticed that my site has a horizontal scrollbar. The only thing I can think of that's changed since I noticed is the background image. I've read that background images won't cause a horizontal scroll though. What's going on?

My CSS can be found at: cineweekly.com/core-style.css

Sep 22nd, 2010, 12:02 AM
Its your search box. Firebug for Firefox is really useful for this kind of situation. You form is 950px wide and it has position: absolute on it. Decrease the width of your search box.

Sep 22nd, 2010, 12:02 AM
I think it's because you have an i-frame in there somewhere. They tend to do that. Try overflow:visible. And no, you're right... bg images can't do that.

There is some element in there which is wider than the viewport. That will cause h-scrolling to occur. If you wrap everything in a container element and make it 100% of the screen with: width:100% then maybe you'll stand a good chance of losing the bar.

Otherwise, the site works. Does it really matter?

Dr. V

Sep 22nd, 2010, 04:21 AM
I completely forgot about the search box. I was going by visual reference. I've changed it now but I can't figure out how to get it vertically centered with the logo.

Sep 22nd, 2010, 04:41 AM
I think it looks great. It looks pretty much vertically aligned.

Sep 22nd, 2010, 04:47 AM
I set the top margin since vertical-align and float:clear and all that stuff didn't work. Whew! Almost have all my css cleaned up.

Sep 22nd, 2010, 06:28 AM
There is no such thing as float:clear.

Sep 22nd, 2010, 06:44 AM
I just meant "clear" which is used for floated elements. You know what I mean.

Sep 22nd, 2010, 06:54 AM
Yes its clear:both. You use it on elements that come after floats allowing the element to be put back into normal flow.

Sep 22nd, 2010, 08:07 AM
Yeah I figured that was why I couldn't get it to align properly at first but couldn't get it to work. Setting the margin seems to be an appropriate fix since the top banner ad and the logo will stay roughly the same size for a while.