Welcome to WebmasterWorld Guest from 107.20.5.156

Forum Moderators: not2easy

Message Too Old, No Replies

break footer oustise of wrap

     

tonynoriega

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

WebmasterWorld Senior Member 5+ Year Member



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

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

10+ Year Member



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

position:absolute;
left:0

alt131

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

WebmasterWorld Senior Member 5+ Year Member



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

Featured Threads

Hot Threads This Week

Hot Threads This Month