CSS: small footer problem with big horizontal scrollbar

I can't get my footer at work. For some reason it gives a scrollbar at 100% width. I tried to implement the Sticky Footer technique, probb something went wrong :D

This is the css code which controls the footer:

.mf{
background: #eaeade;
width: 100%;
padding-left:100px;
padding-top:51px;
padding-bottom:11px;
position: absolute;
margin: 0 auto;
bottom: 0;
}

This is the html:

<div style="background-color:#EAEADE;text-align:center;overflow:hidden;">
                    <div class='mf'>
              <div class='home-links-footer' style="color:#8E8E80;">
                <a href="index.php">Home</a> | <a href="index.php?option=com_content&view=article&id=14&Itemid=5">Beveel ons aan!</a> | <a href="index.开发者_如何学Pythonphp?option=com_content&view=article&id=4&Itemid=2">Onze Services</a> | <a href="index.php?option=com_content&view=article&id=5&Itemid=3">Laptop Reparatie</a> | <a href="index.php?option=com_content&view=article&id=6&Itemid=4">Onze Tarieven</a> | <a href="index.php?option=com_content&view=article&id=14&Itemid=5">Contact Gegevens</a> | <a href="#">Sitemap</a>
              </div>
              <div style="color:#8E8E80;border-bottom:1px dotted;padding-bottom:3px;width:700px;margin:auto;">
                Friese Computerservice - 8932 JZ Leeuwarden - <a href="mailto:info@friesecomputerservice.nl" style="text-decoration:none;"><span style="color:#F57F20;font-weight:bold;">info@friesecomputerservice.nl</span></a> - Tel. 058-8446628 Mob. 06-29594595
            </div>
        </div>
    </div>

---

You have to understand that the CSS box model considers the "width" to mean the width of the content of the box, not the overall size of the box. You've given your box padding on the left and right, so that padding is going to be outside the 100% width.

Personally I find that an extremely bizarre mechanism to work with, but there you go.

What should work (but won't in old IE versions) is to not mention "width" and just set "left" and "right" to 0.