CODEWITHSUNDEEP
cssscrollbarwhitespace
jprince
jprince

Reputation: 181

Webpage scrolling horizontally with only whitespace to the right

I've been developing this site for a while and suddenly today I noticed that the horizontal scrollbar on my browser was showing and was allowing the site to be scrolled a few inches to the right, all of which consists solely of whitespace.

It's doing this on several pages, but not all.

Here is a page on which I have the issue - http://www.princewebdesigns.com/staging/gallais/our-firm.html

Here is a page on which I do not have the issue - http://www.princewebdesigns.com/staging/gallais/index.html

I've tried debugging in FireBug but I can't find any divs or elements that are causing the page to be wider. Is it possibly related to a float? It appears to be an issue in all browsers.

Any help would be appreciated.

PS - I know the nav links are not functioning, it's because I'm temporarily housing the site in my web server's staging directory.

Upvotes: 0

Views: 501

Answers (2)

Ben
Ben

Reputation: 13625

css class .bluebar h1 has a property width: 70em;

em should not be used to define width of elements. Your browser calculates the h1 to a font-size of 28px, which makes the .bluebar 28 x 70 = 1960px wide. For a proper explenation on em and other css units, see w3schools

Both Firebug and Dragonfly allow you to hover the page. This is default behaviour in Dragonfly . In Firebug you can turn it on by clicking the arrow button on the top left of the firebug window. This way you can find the elements quite fast.

Upvotes: 1

Tom Chantler
Tom Chantler

Reputation: 14941

The problem is this bit:

<div class="bluebar">

If you change that to be <div class="banner"> then it works okay (but obviously you now have the background graphics. On further inspection I see that... oh hang on... no point in duplicating the answer here!

EDIT: Okay, I took too long answering this - lol! Give Benjamin the answer credit.

Upvotes: 0

Related Questions