homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

break footer oustise of wrap

WebmasterWorld Senior Member 5+ Year Member

Msg#: 4231126 posted 6:29 pm on Nov 16, 2010 (gmt 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?


Sarah Atkinson

10+ Year Member

Msg#: 4231126 posted 9:40 pm on Nov 16, 2010 (gmt 0)

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



WebmasterWorld Senior Member 5+ Year Member

Msg#: 4231126 posted 10:00 pm on Nov 16, 2010 (gmt 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 ... ;)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved