creating cool large footer

[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..

//contents here

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.

[Author]

Posts