私のサイトは chrome で完全に動作しますが、IE7 でテストしたところ、サイトが左揃えになっただけでなく、全幅 (100%) のヘッダーの背景が全体に広がり、ヘッダーとコンテンツが左揃えになりました。
正しく動作するのはフッターだけのようです。これがなぜなのかはわかりませんが、「ハック」して機能させるのではなく、コードに何か問題があると確信しています。
私はこれを理解することはできません！これが私のコードです：
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Title</title>
<link href="main2.css" rel="stylesheet" type="text/css">
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="header">
<div id="header_content">
<a href="/"><img src="/static/img/header.jpg" id="logo" alt="coming soon" title="coming soon"></a>
<ul>
<li><a href="/posts/list/">Link1</a></li>
<li><a href="/posts/create/">Link 2</a></li>
<li><a href="/about">Link 3</a></li>
</ul>
</div>
</div>
<div id="main">
There are many sticky footer methods to be found in Google. I've tried many of them and they usually fail in some regards. The problem it seems is that some of these methods are old and may have worked in older browsers but they don't in newer browser releases. Because those pages are old, and were heavily linked too in the past, they still rank high in Google. Many webmasters looking for a sticky footer solution end up scratching their heads as they try these same old methods because they are the first ones they end up finding when they search.
</div>
</div>
<div id="footer">
<div id="footer_content">
© 2012 Company, Inc.
<ul>
<li><a href="/contact">Contact</a></li>
<li><a href="/contact">Terms</a></li>
<li><a href="/contact">Privacy</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS
* { margin: 0; padding: 0; }
html, body {height: 100%; }
body { min-width:900px; }
/* LAYOUT */
#wrap {min-height: 100%;}
#main { background-color: purple; margin: 0 auto; overflow: auto; padding-bottom: 60px; width: 900px; }
body:before { content:""; height:100%; float:left; width:0; margin-top:-32767px;/ } /*Opera Fix*/
/* HEADER */
#header { background-color: orange; width: 100%; line-height: 60px; }
#header_content { position: relative; width: 900px; margin: 0 auto; }
#header ul { list-style: none; position: absolute; top: 0; right: 0; }
#header ul li { float: left; }
#header ul li a { font-weight: bold; text-decoration: none; }
#header ul li a:hover { }
/* FOOTER */
#footer { margin-top: -60px; clear:both; background-color: blue; line-height: 60px; }
#footer_content { width: 900px; margin: 0 auto; position: relative;}
#footer ul { list-style: none; position: absolute; top: 0px; right: 0; }
#footer ul li { float: left; margin-right: 5px; }
#footer ul li a { font-weight: bold; margin-right: 5px; text-decoration: none; }
#footer ul li a:hover { }