Background Width + Footer is streching more than it should - html

Question

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 scroll to the right, the background also goes away.

Answer 1

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 :)
Decrease the overall width of your
site to be around 984px to
accommodate more screen sizes.
redesign the container boxes layout,
draw them out on paper if you have
to.
read about grow-to-fit,
shrink-to-fit widths in CSS and how
to trigger them
use relative positioning and avoid
using left/right if your
inexperienced.
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.