Why does the CSS border on my footer push the page just over 100%

Question

I'm using this method to get my footer at the bottom of the page properly.

However, when I add a border to my footer, I end up with a scroll bar regardless of the content on the screen. My confusion is that:

I thought borders functioned outside padding but inside margins, such that like padding they do not effect any layout external to the div.

Is this wrong?

Here is my skeleton html:

<body>
    <div class="wrapper">
        <div id="top"></div>
        <div id="body">
            <div id="box1"></div>
            <div id="box2"></div>           
        </div>
        <div class="push"></div>
    </div>
    <div class="footer"></div>
</body>

And here is the relevant CSS:

     #top
        {
            height: 105px;
            border-bottom-style: solid;
            border-bottom-color: #044E97;
            border-bottom-width: 7px;
        }

    #body
        {
            margin-top: 25px;
            width: 100%;
            background-color: white;
            color: #282828;
            font-size: 85%;
        }

    #box1
        {
            width: 460px;
            float: left;
            margin-left: 25px;
            margin-right:75px;
        }

    #box2
        {
            margin-left: 25px;
            margin-top: 15px;
            padding-top: 0%;
            padding-bottom:0%;
            margin-bottom:45px;
            width: 350px;
            height: 320px;
            float:left;
            border-top-style: solid;
            border-top-color: #FFFFFF;
            border-top-width: 10px;
        }           
    html
        {
            height: 100%;
        }
    body
        {
            min-height: 100%;
            background-color: white;
            margin: 0;

        }
    html, body
        {
            min-height:100%;
            position:relative;
        }

    .wrapper
        {
            min-height: 100%;
            height: auto !important;
            height: 100%;
            margin: 0 auto -3em;
        }
    .footer, .push
        {
            height: 3em;
            clear: both;
        }
    .footer
        {
            width:100%;
            background-color: #0563A1;
            border-top-style: solid;
            border-top-color: #044E91;
            border-top-width: 8px;
            color: white;
            font-size: 77%;
            padding-top:.3em;
            padding-bottom:.3em;
        }

If I change the footer div to not have padding, the scroll bar clears.

Possible duplicate to > https://stackoverflow.com/questions/3443606/make-footer-stick-to-bottom-of-page-correctly — vanburen, Jul 10 '15 at 05:43

score 3 · Accepted Answer · edited Jul 10 '15 at 05:56

This assumption is incorrect:

I thought borders functioned outside padding but inside margins, such that like margins they do not effect any layout

Margins and borders do affect layout—it is just that they are positioned outside the padding. The hierarchy of spacing starts from explicitly defined dimensions (width and height), followed by paddings, then borders, then margins.

If borders and margins did not affect layout, it would then be impossible to create spacing between elements (no margins) or that borders of adjacent elements will overlap (borders taking up no additional space).

The issue you are facing is that borders are computed not as part of the width or height—when you leave a 3em space at the bottom of your body, the footer that is 3em high will fill the space. But when you add borders and/or padding to it, it will add an additional vertical height (sum of top padding of 8px, and top and bottom borders of 0.3em each) to the defined height, causing it to exceed 3em and hence trigger an overflow.

To force your footer to stick to 3em, you can either use box-sizing: border-box to force the height attribute to take into account border widths and padding, or height: calc(3em - 0.6em - 8px) to manually reduce the height of the footer so the sum of height, top padding and top+bottom border widths remains at 3em total.

Very helpful answer. I edited above and meant to say "such that like padding they do not effect any layout external to the div." That assumption is correct right? Either way, I will use your solutions and get this fixed. Thanks — COMisHARD, Jul 10 '15 at 05:54
Thank you so much. Used the box sizing and now my site looks so much sharper. Thank you. — COMisHARD, Jul 10 '15 at 05:56

score 0 · Answer 2 · answered Jul 10 '15 at 05:36

0

Change your box-model to border-box, like this:

html{box-sizing: border-box;}

Let me know if it helps.

answered Jul 10 '15 at 05:36

Orlando Paredes Hamsho

116
6

This is also correct, person above just provided the same solution with more explanation. Thank you – COMisHARD Jul 10 '15 at 05:57

Why does the CSS border on my footer push the page just over 100%

2 Answers2