Background Width + Footer is streching more than it should

I have this website: http://www.ryansammut.com/orijen/contact.html.

The footer is also being more lenghty than it should in Firefox, but it's ok in IE and Chrome.

When I zoom in a lot, and s开发者_运维百科croll to the right, the background also goes away.

The site has some heavy design problems...

But if I were to ignore them and just tackle the problem at hand in the easiest and dirtiest manner possible, I would suggest to add this CSS to the bottom:

body {
    margin: 0 auto;
    width: 1280px;
}

Due to the fact that I can't spend all my time doing your work, most I can do is provide suggestions for the future :)

1. Decrease the overall width of your site to be around 984px to accommodate more screen sizes.
2. redesign the container boxes layout, draw them out on paper if you have to.
3. read about grow-to-fit, shrink-to-fit widths in CSS and how to trigger them
4. use relative positioning and avoid using left/right if your inexperienced.
5. Install firebug and experiment with CSS using it.

edit:

Make 3 div's one after the other, with width:auto (default) for each.

call them #header,#content,#footer

give each div a sub div, with a class .sub and give them the same background as it's parent.

make the .sub class have the required width (1280px) and keep it equal between the 3.

give the .sub class margin:0 auto;

so your site structure will look something like this:

<div id="header">
    <div class="sub"></div>
</div>
<div id="content">
    <div class="sub"></div>
</div>
<div id="footer">
    <div class="sub"></div>
</div>

and your CSS something like this:

#header,
#content,
#footer {
    width:auto;/*not necessary as it's the default value anyway*/
    position:relative;/*not necessary but will help later on*/
}
#header .sub,
#content .sub,
#footer .sub {
    width:1280px;
    margin:0 auto;
}
#header,
#header .sub {
    background:whatever1;
}
#content,
#content .sub {
    background:whatever2;
}
#footer,
#footer .sub {
    background:whatever3;
}

is this what you want?

Alternatively if you don't want to alter your sites html, you can try playing around with min-width. where in IE6, width is almost the same as min-width.