homepage Welcome to WebmasterWorld Guest from 54.226.191.80
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
break footer oustise of wrap
tonynoriega




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

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




msg:4231194
 9:40 pm on Nov 16, 2010 (gmt 0)

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

position:absolute;
left:0

alt131




msg:4231202
 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*/
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 ... ;)

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