Web page width more than 100% need help finding the problem

Question

Hi all,

I've been working on a wordpress theme and just now noticed that the width of the page is more than 100%.

I know that posting the code here would be helpful, but I don't know what portion of the code is the culprit. Whether it's a wierd HTML issue or CSS or otherwise.

I've tried removing the javascript links in the header as a hatchet approach but that didn't do anything for me.

I'm stumped.

Please take a look here: http://naac-hf.org/dev/

Any help would be sincerely appreciated.

Thanks.

Answer 1

In your CSS Change this:

#secondaryNav {
  float: right;
  position: absolute;
  text-align: center;
  background: url(assets/img/bg_subHeaderBar.png) no-repeat bottom left;
  width: 100%;
  height: 50px;
  top: 100px;
}

To this:

#secondaryNav {
  float: right;
  position: absolute;
  text-align: center;
  background: url(assets/img/bg_subHeaderBar.png) no-repeat bottom left;
  width: 750px;
  height: 50px;
  top: 100px;
}

The 100% width is causing it to overflow the page currently.

Answer 2

It looks like it is your #secondaryNav. I changed the with to 800px and the horizontal scrollbar went away.

I would invest in Firebug. It helps a lot with finding problems like this.