Unique footer alignment problem

I have a very wide footer I need centered and it will not listen to me!

[taokore]

Hey all. I have a problem getting a footer centered on a blogger template I am working on. The footer image is 2597px wide, while the main body is only 1098px. I want the footer image to be centered and stay that wide (lining up with the body layout) so that any higher res screens don't drop off after the image edges, as I know a few people who run up to 2560 x 1920.

The only way I have been able to center it is to use absolute positioning, which should not be needed and screws everything else up anyhow. I would prefer to stick with the normal document flow. Code:

#footer {
width: 2597px;
height: 450px;
background: url('http://files.example.com/temp/cw_footer.jpg');
clear:both;
margin:0 auto;
padding-top:0px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

---------------------------------------------
</div></div> <!-- end outer-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</body>
</html>
---------------------------------------------
As you can see above, the footer div is outside of the container div to avoid problems with their differing widths. The footer div still aligns to the left of the page no matter what still though. I need expert help! I'm just a lowly graphic designer who pretends to know how to code lol. Any suggestions?

[edited by: encyclo at 4:09 pm (utc) on Mar. 29, 2009]
[edit reason] no links to personal sites please, see posting guidelines [/edit]

[swa66]

Welcome to WebmasterWorld!

I'm not sure what "<b:section class='footer' id='footer'/>" is supposed to become in html, but that aside, it seems like the "outer-wrapper" is holding the main content thats centered and as wide as you wanted it.

Your footer isn't part of that so the trick really is not to try to make it as wide as possible (causing scroll bars to appear), but to let it become as wide as the viewport (which a div will do on it's own), and to set the background in the center of it.

#footer-wrapper {
  background: url('http://www.example.com/temp/cw_footer.jpg') no-repeat center top;
  clear:both;
}

is all you need. (remove that width and background on #footer)