| 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 ... ;)
|
|
|
