この .inner div に右に浮いているこの要素が含まれていない理由を知っている人はいますか?
<header>
<div class="inner">
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<a href="http://derekthomaswood.com">BUTTON</a>
</div> <!-- end .inner -->
</header>

この .inner div に右に浮いているこの要素が含まれていない理由を知っている人はいますか?
<header>
<div class="inner">
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<a href="http://derekthomaswood.com">BUTTON</a>
</div> <!-- end .inner -->
</header>

overflow: autoに追加.inner: http://jsfiddle.net/7Sunw/1/
float: left/right要素を標準の要素フローから何らかの方法で取得するため、親要素はそのサイズに引き伸ばされなくなります。overflow: auto子要素がフローティングされている場合でも、それを実現するには使用する必要があります。
ヘッダーの後に別の div を追加してみてください
<div id="footer" style="clear: both;"></div>
やるべき