CODEWITHSUNDEEP
htmlcssstylespositionfooter
TheCarver
TheCarver

Reputation: 19713

CSS Fixed Footer Width With Padding

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
}

Upvotes: 1

Views: 1950

Answers (2)

a.b
a.b

Reputation: 9574

When you set width of your element with CSS, it sets only the content area of the DIV. Padding and Border width are calculated outside the content area. You can however put another DIV inside your footer DIV and set padding of it to 30px, to preserve 100% width of the outer DIV.

<DIV style="width:100%">
   <DIV style="padding:30px">
       <!-- Actual footer content -->
   </DIV>
</DIV>

This shall be CSS2.0 compatible. ;)

Upvotes: 3

Brigand
Brigand

Reputation: 86240

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 *).

Upvotes: 1

Related Questions