Issue with slight horizontal scrolling

I have page where the main content scrolls about 5px left and right - its the content under the wide banner image with the two columns here:

I’ve been having a look at CSS for the contentWrapper and left and rightcolumn / leftcolumn but can’t see anything obvious.

If anyone can think what might be causing it / where to look and fix it that would be much appreciated.

Thanks.

I mean on the right column I see a 4px gap from the right column to the edge of the page? Is that what you mean?

#outerWrapper #contentWrapper{}

Look at this rule. You set a max-width of 976px on it while the other elements on your page are 980px. So it’s 4px not wide enough and as a result you have 4px of it not lining up on the right edge.

Increasing it to 980 would be enough.

You do know your website isn’t responsive though, right?

Thanks Ryan - where are you seeing the references to 976 and 980? That’s exactly the sort of thing I figured it would be, but can’t see it. I searched the whole /css/ folder for 980 and drew a blank.

I did try adding in that max-width:976 earlier to try to fix it, which I’ve taken back out now. Are you still seeing it somewhere?

Yeah - I know it isn’t responsive. The site has been growing since before responsive was as big a deal as it is now, and I’ve been spending most of the limited time I have for the site building a load of database functionality for people to log in, update all the details, admins to add the nominations etc, voters to vote etc. If we ever get to catch out breath will all that stuff I should get a chance to make it responsive.

In my web tools, I did look for margins being set or anything of that nature. I saw no such thing.

Then I saw that your outer elements are totaling 980px or so, while your sidebar/content outer element only totaled 976. Further inspection showed it was set that way. Pretty simple from there to work out it was the max-width.

You must have just removed it after you read my post; all max-widths on that have been removed. It also looks fixed now.

Just making sure you are aware :wink: .

No problem - in case that read a bit defensive, it wasn’t intended to. :smile:

It wasn’t fixed, but looking at it some more, I tried changing the #rightcolumn: width:526 to #rightcolumn max-width:526, with no joy.

Removed the width value completely, and its fixed it. Not sure why - the outerWrapper is 976. A leftColumn of 440 and a rightColumn of 526 should fit without that scrolling.

Still, if its happy with that 526 removed, that’s good enough for me.

All good.

My fix worked for me on my end but perhaps I was looking at the wrong issue. Quite probable.

Either way, you appear to have it working. Good job.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.