Grow your CSS skills. Land your dream job.

creating cool large footer

  • # November 27, 2012 at 1:04 am

    Hi There,
    I am new to css and looking to create a large footer on my site i’m working on. I’m currently using the foundation framework to work off of.

    I am looking to add a fairly large footer in width with a dark background color that extends the full width of the browser.

    Much appreciated.

    # November 27, 2012 at 1:10 am

    I’m not sure what you are asking.

    What is difficult about creating the footer?

    If you mean that the ‘footer’ will have definite width in the center of the page but the color is to be the full browser width then you need a ‘wrapping div around the footer.

    Then just give them both the same bg and then set a width and appropriate margin **to the footer only.**

    # November 27, 2012 at 1:33 am

    Hmm.. Might someone be able to give an example?

    Thinking

    .footer {

    Width: 100%
    background: black
    margin: 0 auto

    }

    # November 27, 2012 at 4:52 am

    It depends on what your design is.

    All block level elements (such as divs, footer, header etc) are always 100% width unless you tell them differently so there is no need to set a width unless you want to.

    If you DO set a width then the margin settings will centre it.

    It won’t show up unless you put some content in it or give it a height.

    Frankly, until we see what it is you are trying to do, it’s hard to help further.

    # November 27, 2012 at 8:42 am

    this would help, i think..

    //contents here

    then on your css..

    footer {
    height: 400px; /* depends on you */
    background: #444;
    }

    .wrapper {
    margin: 0 auto;
    width: 960px; /* depends on you also */

    }

    # November 27, 2012 at 9:56 am

    I’d do it differently but the basics are there.

    # November 27, 2012 at 11:18 am

    Thank you chester

    # November 27, 2012 at 7:15 pm

    @Paulie_D.. mind if you show us how you do it.. maybe its better and we could adopt it. tnx

    # November 28, 2012 at 1:03 am

    It wouldn’t be too different.

    I’d put the wrapper outside of the ‘actual’ footer so it, you know, wraps and leaves the footer to actually hold the bottom content.

    I wouldn’t set a height on the wrapper itself (now that it’s on the outside) but rather let that be determined by the height of my footer….less complicated all round.

    As I said, not much difference, just personal choice.

    # November 30, 2012 at 6:48 pm

    Only thing i’m having trouble here is that it’s not sticking to the bottom..

    # November 30, 2012 at 7:06 pm

    You need a sticky footer. Search sticky footer on Google.

    # November 30, 2012 at 7:22 pm

    Ok..this is what I am trying

    * {
    margin: 0;
    }
    html, body {
    height: 100%;
    }
    .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
    }
    .footer, .push {
    height: 4em;
    background: #444;
    height: 500px;
    }

    .footer, .push {
    clear: both;
    }

    # November 30, 2012 at 11:48 pm

    uhmm it’s hard to tell. Please include the HTML markup for the footer part. or even better do it in codepen.

    # December 1, 2012 at 2:41 am

    @wragen22
    Here’s your big sticky footer
    You can adjust the height of the footer, but remember to always keep content-wrap bottom padding and the height of the footer the same

    http://codepen.io/anon/full/nesgd

    oops, just noticed that it was solved, oh well

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

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