Forums

wragen22

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.

Paulie_D

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.

wragen22

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

Thinking

.footer {

 Width: 100%
  background: black
  margin: 0 auto

}

Paulie_D

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.

chester

this would help, i think..

<footer>
  <div class = "wrapper">
    //contents here
  </div>
</footer>

then on your css..

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

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

}

Paulie_D

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

wragen22

Thank you chester

chester

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

Paulie_D

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.

wragen22

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

Watson90

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

wragen22

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;
}

chester

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

jurotek

@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

treehouse : what would you like to learn today?

Forums

[Solved] creating cool large footer