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?

score 5 · Answer 1 · answered May 07 '14 at 16:54

5

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.

answered May 07 '14 at 16:54

helion3

34,737
15
57
100

score 2 · Answer 2 · answered May 07 '14 at 17:00

2

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

answered May 07 '14 at 17:00

David Sturgeon

66
4

Doesn't work on my end. Firefox and Chrome, latest versions. "test" text still showing cut-off on the right side. – Darxide May 07 '14 at 17:10

score 0 · Accepted Answer · answered May 07 '14 at 17:05

0

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/

answered May 07 '14 at 17:05

Stormkyleis

186
1
1
8

Thanks. That boarder-box stuff didn't do anything, but this worked like a charm. Quick and painless. – Darxide May 07 '14 at 17:11

Padding extends div off screen

3 Answers3