Footer inside a fixed width container needs to be full browser width?

HTML & CSS
1

I’ve included a snapshot of my layout below. Each square represents a div.

1200×1000 44.3 KB

What I’m trying to achieve is to have a background behind the .pre-footer and .footer elements that spans the entire width of the browser.

Currently, since these elements default widths are constrained by their parent div, .main, any background applied to them is only as wide as the parent container width.

How would you achieve a full width background for these elements? (While at the same time, maintaining a fixed width, centered layout for the other elements as in the snapshot.)

I’ve attached a modified version of my layout below, to show you my intended final layout, with a the pre-footer div floating to the left of the footer div and its child elements floated to the left of each other.

1200×1000 43.7 KB

I’ve got the css for the basic layout down. I just need some ideas on how to arrange the .pre-footer and .footer css to do the full width background, with centered elements.

Any help much appreciated.

2

Your going to have to take it out of the wrapper and place it below the wrapper to get 100% width. Then just drag it up where you need it placed.

3

Thanks Eric, but I should have clarified this. The layout cannot be changed, so I’m looking for a pure CSS solution.

I’m pretty sure I can absolutely position those elements and set the width property to 100% and the left property to 0. That gives me full width at the bottom of the flow. However, I still want the elements centered.

4

Ok. You shouldn’t have to AP it. Just give it a larger width then. I think ie6 will expand the parent container though. Don’t really know I’ve never over-widthed. Other then that I don’t really see another way. Maybe others will…

5

I’m pretty close with the AP. Assigning a width wider than 100% is problematic and will force horizontal scrollbars.

Here’s what I’ve got so far that’s working reasonably well…


html {background:#f5f5f5 url(splash_bg.png) 0 5px repeat-x;} 
/*
this background extends all the way down the window and becomes 
the background for the footers (since .wrapper stops just above the footer)
*/

.wrapper {background:#ccc url(splash2_bg.png) 0 155px repeat-x;} 
/*
this background extends from below the header all the way to the top of the pre-footer element.
*/

.main {width:927px;margin:0 auto; position:relative;}

.pre-footer {position:absolute;width:100%; left:0;}

.pre-footer .text-widgets {float:left;max-width:230px;margin-right:20px;}

.footer { position:absolute; width:100%; text-align:right; right:20px; margin-top:30px;}
6

If you go wider than the browser window it will always create horizontal scroll bars. The only way around that is to use position fixed but that will not work in your case.

7

That’s right. That’s why I could not implement your original suggestion. I don’t want horizontal scrollbars on the layout.

Actually, not exactly. I’ve posted the solution just above. Adding AP to the div, then setting the width to 100% and the left position to zero, effectively solved my problem. I solved it while waiting on an alternative answer here.

I’m open to other ways of doing it that might be more bulletproof, but for now, what I’ve posted above works very well in the modern browsers I’ve tested against (ie9, FF3, Chrome).

8

Well I think something is amiss. Because you have position relative on your .main. So if you set left zero on the footer then it would be sitting directly flush with the left side of your .main. If you remove the position relative from the .main then it will go to left zero of the body (unless another container has PR). If thats the case then that may work on your computer but the position will change for others.

Edit: unless I’m completely confused and you simply just want the footer full width of the .main? I thought/think you wanted it full width of the body?