Grow your CSS skills. Land your dream job.

[Solved] Footer Strech to Max Width?

  • # March 16, 2010 at 10:06 am

    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:

    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.

    # March 16, 2010 at 12:34 pm

    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…

    # March 17, 2010 at 12:36 am

    Hi Blue,

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

    # March 17, 2010 at 1:04 am

    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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".