Footer (Child Element) to Escape Confines of Wrapper (Parent Element)

Hi All,

My employer is having me convert our graphic designer’s layout to our proprietary CMS’ fixed theme. The theme cannot be changed without the change rippling into all the other sites, so that’s a no-no. I can only change the CSS to appease the browser gods.

Please check out the following link:

http://aswdemo1.htoademos.com/welcome.asp

You can see that I used an absolute tag to help the header escape the confines of it’s parent element and stretch to 100%. Well, I am trying to do the same for the footer. The only problem is that every time I slap an absolute tag on the footer, it parks itself right under the next closest absolutely positioned element, the header. I doubt that’s a coincidence.

So I am looking for a new tact to give the design a header and footer that will stretch to 100% percent. Any thoughts on how to achieve the desired result, given the fixed theme?

Thanks,

Ansel

Hmm, have you checked that link? The page won’t load for me. :confused:

Hi,

Not really sure if this is what you mean but you could add an element to the footer and then absolutely position it to the left and right assuming that you don’y set position:relative on the footer (won’t work in IE6 though) .

e.g.


#foot-bg{
position:absolute;
height:244px;
left:0;right:0;
background:red;
z-index:-1;
}

It would need to match the height of the footer and you would need to avoid using top or bottom or that will take it out of its auto position.

Not sure if that’s what you meant.

Hi Paul,

Thank you, you’ve really been instrumental in helping to fix the last two problems.

I implemented your CSS and it works in the latest Chrome, FF and IE8/9, but not IE 7. Any idea why it’s not behaving properly?

Again, thank you,

Ansel

Hi Paul, I removed the z-index property and it now displays properly in all the browsers mentioned above (I don’t have access to IE 6). What was the thought behind the z-index tag? I’m trying to anticipate if I created an unintended consequence.

Thanks,

Ansel

Hi,

The negative z-index was to put the background behind the footers existing background. If you aren’t going to use the exiting footer background you should be alright.

However make sure that any text links in the footer can be clicked just in case there is a stacking conflict.

Yep. The background you saw originally was the only background I wanted to show. Great! Thanks again! Wish we could click a button and give you a kudo flag or some other banner.

Ansel

Off Topic:

If you look at Paul’s avatar, you can see the effect all the past praise has had on his head. :lol: