Combining sticky footer with 100% width background

[cre8tive1]

Hi all,

I’m working on a redesign for a website and would like to use a 100% background for the masthead and footer, along with a sticky footer like the design of Theme Forest

I’m stuck on how to set this up and keep the sticky footer working. I don’t like nesting tons of DIVs. I’ve looked at the CSS on the site and the method of how they created this combo is eluding me.

Can anyone offer any insight on how to approach this technique?

[Akuseru]

Well… I don’t understand your problem… But:

A sticky footer goes like this:

footer{

width: 100% ; /*Full*/

height: 200px;

position: fixed; /*This make the sticky stuff*/

}

Well, i’m glad if you can reformulate your question to give you a more appropiated response…

[cre8tive1]

My apologies for not being clear.

This is the page I’m roughing out via html/css: Sticky footer and 100% width background

I’m not sure if I’ve gone about coding this well or not.

[cre8tive1]

SOLVED: I was able to get this working. Thanks to all.

[joebob]

How did you solve it? This is what I use for a sticky footer:

http://ryanfait.com/sticky-footer/

[cre8tive1]

Yes, that’s the method I’m using. I realized after I posted the message that the “footer” in Ryan’s method is outside of the tag. So making the footer 100% width was no problem.

What I’m having an issue with now is figuring out how to make the elements in the masthead 100% width because they are within the tag. I’m going to take a break and look at it again tomorrow as right now I think I have a stray “div” somewhere. :-)

[Author]

Posts