Q:

Make a div auto fill exactly parent div horizontally

I want to have a footer in my html body that fills the body horizontally. 
I have an html like this:
<body>
    <div class="footer"></div>
</body>

and a css like this:
body {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}
body .footer {
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: auto;
    padding: 10px;
}

the documentation says that when I use display:block in a div then this div fills the parent horizontally by default.  I don't know why but this isn't happening here!  So I changed the css like this:
body {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}
body .footer {
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: auto;
    padding: 10px;
}

now the problem with width:100% in addition with a padding:10px is that it produces a div bigger than the parent by 20px of course and a horizontal scrollbar apears! 
Is there a standard way to accomplish that right? 

A:

There are three methods: 
No horizontal padding: 
padding: 10px 0;

Absolutely positioning on the right as well:
right: 0;

Or change the box-sizing of the footer:
box-sizing: border-box;

See here for more explanation on box-sizing: http://css-tricks.com/box-sizing/

