Question

Being an amateur CSS coder, trying to do away with “table” syndrome, I’m having some issues getting a fixed footer to work properly.

I have my footer DIV set to 100% width but because there is a 30 pixel padding inside of the DIV, the footer extends 60 pixels past 100%, if you know what I mean.

How can I solve this issue?

My CSS is this:

#footerDiv {
background:url(../images/background/mainBG.gif);
margin:0 auto;
padding:15px 30px;
width:100%;
bottom:0;
left:0;
z-index:4;
position:fixed
}

Answer 1

It sounds like a box-model issue. For more information look here.

The code to make it right looks like this,

.footer {
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
}

Since it makes more sense to me, I sometimes apply that to all elements on the page (i.e. replace .footer with *).