Padding extends div off screen

Question

I have a page with a footer on it that is defined as such in the html:

<div id='footer'>
    <span style="float:left;">
        Contact me at <a href='mailto:admin@test.com'>admin@test.com</a>
    </span>
    <span style="float: right;">test</span>
</div>

And the CSS for the footer div is as such:

#footer {
    position: fixed;
    bottom: 0px;
    left: 0;
    z-index: 998;
    width: 100%;
    background-color: #000000;
    padding: 2px 0 3px 20px;
    border-top: 3px groove #aaaaaa;
    font: 11pt Arial;
}

What I have discovered through some Google searching is that padding a div will add that padding to the size. In my case, padding 20px to the left is adding 20px to the width, so the new width of the div is 100% + 20px and those extra 20px are off the right edge of the viewport.

I found a lot of people saying to use margins rather than padding, so I tried it with margin-left: 20px instead of the padding, but the "test" text was still off the screen to the right.

How can I simulate the look of the padding but without the right floated text off the screen?

Answer 1

Another solution that works for every browser is to put another div inside your footer:

<div id='footer'>
    <div id="footerContent">Contact me at <a href='mailto:admin@test.com'>admin@test.com</a></div>
    <span style="float: right;">test</span>
</div>

Then you can style footerContent freely without interfering with the main div size.

http://jsfiddle.net/G3Yxt/

Answer 2

If you don't care about IE8 and below, you can use box-sizing: border-box so that the padding is included in the width.

Answer 3

You can force the div to render the box sizing in border box mode. This causes the padding to be added to the inside of the box, and your div will never get larger than 100%. https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing. Just a note this works in IE8+.

box-sizing: border-box;

Working Example: http://codepen.io/davidsturgeon/pen/zJcnL