The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Footer Strech to Max Width?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #28412

    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:


    With the following CSS

    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 {
    margin: 0 auto;

    Any help would be wonderful.


    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…


    Hi Blue,

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


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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.