Вы не хотите, чтобы нижний колонтитул находился вне тега HTML.Нечто подобное должно работать.
Если у вас есть ширина, установленная на вашем теле тега, 100% будет расширяться только до ширины, установленной на вашем теге.Также, если вы собираетесь использовать HTML5, я предлагаю использовать тег <footer></footer>
.Имейте в виду, что HTML5 нужны хаки для работы в старых браузерах.
<style type="text/css">
body {/*use this to declare font-family and other common attributes */}
#header {width:825px;height:200px;margin:0 auto 0 auto}/*or whatever your dimensions are*/
#main-content-wrapper {width:825px;margin:0 auto 0 auto;}
#footer {width:100%;}
</style>
<html>
<head>
<title></title>
<head>
<body>
<div id="header"></div>
<div id="main-content-wrapper"></div>
<div id="footer"></div>
</body>
</html>