[Solved] Footer Strech to Max Width?

[deane034]

Hi All,

I have a layout which requires both the header and footer to stretch to fit browser width the rest of the content being in a standard 960px width container. Any idea of how to do this?

What I have done is apply the header background for the body to cover the body area and create a footer div outside my wrapper divs for content hoping this would stretch to the maximum. however this produces a horizontal scroll bar, how can i do this without any horizontal scroll bar.

The relevent structure I’m using is as follows:

Code:

123, Milagiriya road, colombo 05 [email protected]

With the following CSS

Code:

body { font-family:”Trebuchet MS”, Helvetica, Arial, sans-serif; font-size:14px; background-color:#FFF; background-image:url(images/header-bg.png); background-repeat:repeat-x; background-position:top;}

#footer { background:url(images/footer-bg.png) repeat-x #f8dd2e; height:47px; width:100%; color:#000; font-size:10px;
text-transform:uppercase; letter-spacing:1px; text-align:center;}
#page-wrapper {
width:960px;
margin: 0 auto;
}

Any help would be wonderful.

[blue642]

what browser do you see the scroll-bar, and what is your resolution?

I do not see a scroll-bar when tested in Firefox, and your plan is what the solution should be…

[deane034]

Hi Blue,

Thanks for the response. I get it on both FF and Chrome but not in IE strangely enough. Any ideas?

[deane034]

oops, turns out the fault was with one of my internal divs which had a 100% width, weird. anyways thanks for your help.

[Author]

Posts