Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

break footer oustise of wrap

6:29 pm on Nov 16, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 8, 2006
votes: 0

my site has a wrap set to fixed width:

margin:0 auto;


i have a footer what is nested in that div.

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

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?
9:40 pm on Nov 16, 2010 (gmt 0)

Preferred Member

10+ Year Member

joined:Apr 29, 2003
votes: 0

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

10:00 pm on Nov 16, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0

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

#footer {
width:120%; /*adjust to suit*/
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 {
margin: 0 -10% 0 -10%;
/* need position for z-index to work, need z-index so content is not "clipped" */
z-index:2 /*a number higher than the z-index of #wrap */

Did I say very hacky though ... ;)