Fancybox Pushes Content of Website to the Right

HTML & CSS
1

I have been going a little crazy trying to correct a very strange behavior with FancyBox. I am using it on a handful of pages in a website. It is being used with a combination of images and type. When I go to the page where I have FancyBox, everything on the page get pushed over about 20 px. I have tried everything to correct it and just can’t find the problem. I have Googled the problem but can’t seem to find a solution. Here is the url for the page that has Fancybox on it: www.northernlightsmusic.org/string_faculty_practice.html. If you click on Program Details you will see how the page shifts over. Any help would be appreciated. This is the first time I’ve used Fancybox. I’ve used Lightbox in the past with no problems when I’ve just been using images. Thanks in advance.

2

Hi Sharon_F. Welcome to the forums. :slight_smile:

You have quite a few HTML errors that are breaking your page, so make sure to clean them up first. E.g.

3

Thanks. HTML has now been validated on http://www.northernlightsmusic.org/string_faculty_practice.html and the Costs link page. But if you click between the two the page with fancybox still pushes to the right.

4

Hi,

The problem is that you are setting the body to max-width:700px; in the fancybox page.


body {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    margin: 0 auto;
    max-width: 700px;
}

Therefore anything over 700px is ignored which is why the page looks off centred because the content flows out by 100px on one side.

Remove the max-width:700px and the page should straighten out.

5

Thank you, Paul. It works perfectly now! Also, thank you, ralph, for taking me to task about my html. Sometimes when I am in a hurry I do so much cutting and pasting that I end up with really bad code.