Sticky footer with more than one wrapper

[wkwolff]

I can get the sticky footer working with no problem, but when add another wrapper div for background reasons I lose the 100% height on the #container div. I’ve tried this in various ways with the push div in different locations and adding different properties to the css elements.

Any help would be greatly appreciated.

Here is the structure:

 /* Has background image for wide screens */



/* Has centered background image */



/* Has background image for content */

Content

CSS:

html, body {
height:100%;
}

body {
background: #ffffff url(../img/bg-body.jpg) repeat-x;
color: #fff;
font-family:’lucida grande’,verdana,helvetica,arial,sans-serif;
font-size:14px;
line-height:1.5em;
margin: 0;
}

#wrapper {
background:url(../img/bg-wrapper.jpg) no-repeat center top;
margin:0 auto -158px;
min-height: 100%;
height: auto !important;
height: 100%;
position:relative;
}

#container {
background:url(../img/bg-container.png) repeat-y;
text-align: left;
width:1035px;
min-height: 100%;
height: auto !important;
height: 100%;
margin:0 auto -158px;
position:relative;
}

#footer {
text-align: right;
background:url(../img/bg-footer.jpg) repeat-x;
margin-top:-158px;
position:relative;
}
#footer, .push {
height:158px;
}

[clokey2k]

For sticky footer you don’t need any negative margin on the #footer or #container. Only on the #wrapper.

Get that working again, and then if you need to stretch the background in #container it may need some thinking.

Maybe contain the entire page in a wrapper (height: 100%) and then sticky footer inside that?

I’ll try a few things, and post them back here for you.

[clokey2k]

Just FYI I tried to wrap everything inside the wrapper in another ‘div’ (#container) but I cannot extend the background of the ‘div’ to the full height, only to the height of it’s content and a container on the outside breaks the layout also! – I tried this because I think this is what you asked? Fix the ‘sticky footer’ so that you can extend 2 backgrounds?

If I have helped I’m glad, if not post back with some more information as to the nature of the backgrounds.

[noahgelman]

If you need another wrapper for background reasons, and adding an additional one is causing you troubles, you can just put the background styling on the html tag just like you do the body. Perfectly legal.

The less nested divs the better

[Author]

Posts