break footer oustise of wrap

[tonynoriega]

my site has a wrap set to fixed width:

#wrap{
width:750px;
margin:0 auto;
}

#footer{
width:100%;
height:25px;
}

i have a footer what is nested in that div.

<div id="wrap">
<div id="footer"></footer>
</div>

obviously this footer only expands the width of the wrap.

is there a way to break the footer out of the wrap, without having to mess with the structure of the DIVS?

I ask this becuase our site is built with a CMS and has templates, and i would have to modify each template, and regenerate each page and deploy... too time consuming...

unless i can somehow bust that footer out of the wrap and have it expand 100% of the browser screen.

any thoughts on this?

[Sarah Atkinson]

You can try adding to the footer. It might work.

position:absolute;
left:0

[alt131]

Hi Tony, this is very hacky, but newer browsers will accept:

#footer {
width:120%; /*adjust to suit*/
height:25px;
margin: 0 -10% 0 -10%; /*margin left and right = 1/2 greater width */
}

If you need to support older browsers, some will obey the negative margin, but slide the footer left/right "under" div#wrap so the footer content appears clipped (and overflow doesn't work), so need something like this:

#footer {
width:120%;
height:25px;
margin: 0 -10% 0 -10%;
/* need position for z-index to work, need z-index so content is not "clipped" */
position:relative;
z-index:2 /*a number higher than the z-index of #wrap */
}

Did I say very hacky though ... ;)