How do I attach a full width footer to an absolute width wrapper?

Not your typical footer question.

[watermac77]

I have searched the site here trying to find an answer to this but come up with the typical scenarios, and this does not seem typical. I have a wrapper DIV that contains the content of my site that has an absolute width of 900px. The background image is the entire width of the browser window creating a nice bar on the top 1/3 of the window with white space below for content. I want to mimic this bar in the footer, but also want the footer to span the window width not just the wrapper (900px). I have created a separate wrapper DIV for the footer but can't figure out how to anchor it to the bottom of the main wrapper since it is not nested. As it is the footer wrapper is absolute positioned and needs changed with each page depending on its length, which is NOT ideal since this site is nearly 1000 pages. Help anyone?

[watermac77]

I thought the code might help explain my situation more. This is the basic structure, although there are other DIVs nested within these main DIVs.

CSS:

#wrapper {
position:absolute;
left: 50%;
top: auto;
width: 900px;
margin-top: 0px;
margin-left: -450px;
}

#wrapperFooter {
width:100%;
min-width:814px;
padding:0 0 2em;
position: absolute;
top: 1020px;
background-color: #0B274F;
height: 130px;
}

#footer {
width:820px;
margin:22px auto;
overflow:auto;
padding:0 0;
}

body {
background-image: url(images/bg.jpg);
margin: 0px;
background-repeat: no-repeat;
}

HTML:

<div id="wrapper">
<div id="container">
<div id="header">
</div>
<div id="main">
<div id="content">
</div>
<div id="sidebar">
</div>
</div>
</div>
</div>

<div id="wrapperFooter">
<div id="footer">
<div id="navSupplemental">
<ul>
<li>
</li>
</ul>
</div>
</div>
</div>

[lavazza]

If I understand what it is you want to acheive, this should work:

#wrapperFooter {
width:100%;
min-width:814px;
padding:0 0 2em;
position: absolute;
/*DELETE THIS LINE top: 1020px; */
background-color: #0B274F;
height: 130px;

/* ADD THE FOLLOWING */
bottom:0;
left:0;
}

[Xapti]

Absolute positioning can use the bottom property too, not just top. To set the bottom of an element to the bottom of it's containing block, just use bottom:0. On a side note, the way to describe the sizing of the page's width is just called fixed width. Absolute width is a somewhat confusing term, since virtually all widths are absolute.

[watermac77]

Thanks for the help. I haven't applied this yet, but if the page scrolls will the footer cover the objects or will it stay at the base of the main wrapper?

[watermac77]

This doesn't seem to work too well. When the browser is opened the footer appears at the bottom of the window but once the window is resized it just stays put plus it covers the content of the site.

What I am looking for is to anchor the #wrapperFooter to the bottom of the #wrapper. If the #wrapperFooter was nested to #wrapper it would be simple, but it is not. The trick is that the #wrapper is a fixed width and the #wrapperFooter needs to be 100% window width with a background color (see CSS above), so I assume they need to be separate, not nested. Any other ideas?

[Old_Honky]

Why do you need "wrapper" and "container"?

Try enclosing the "wrapperfooter" inside "wrapper", set wrapper width to 100% and set "container" width to the 900px.

[watermac77]

Not sure why I didn't think of that... it seems too simple! I'll give it a try.

[watermac77]

Alright, just to wrap up this post (no pun intended), I put this to work. The footer is now relative to the container and the wrapper is full width (not fixed). This worked perfectly! Now I have a background image on the wrapper that spans the width of the window and the footer is relative to the container (nested within the wrapper) at 100% width with a background color that mimics the full width background image of the wrapper. Confused yet? Well it worked.

Here is what I ended up with (minus the DIVs that are unrelated to this problem):
CSS:

#wrapper {
position:absolute;
left: auto;
width: 100%;
top: 0;
right: auto;
}
#container {
position:relative;
left: 50%;
width: 900px;
margin-top: 0px;
margin-left: -450px; /* half of the width to center */
top: 0;
padding-bottom: 40px;
}
#wrapperFooter {
width: 100%;
padding: 0 0 2em;
background-color: #0B274F;
height: 130px;
left: 0;
position: relative;
}

#footer {
width:820px;
margin:22px auto;
overflow:auto;
padding:0 0;
}

body {
background-image: url(images/bg.jpg);
margin: 0px;
background-repeat: no-repeat;
}

HTML:

<div id="wrapper">
<div id="container">
<div id="wrapperFooter">
<div id="footer">
<!-- END FOOTER -->
</div>
<!-- END WRAPPERFOOTER -->
</div>
<!-- END CONTAINER -->
</div>
<!-- END WRAPPER -->
</div>