サイドバーを修正する

だいぶよくなったけど、フッターが画面の幅いっぱいに広がっていない。

サイドバーがフッターの横まで伸びている。

これも単純な問題で、二つの変更で修正することができる。まず最初にfooter.phpを開く必要がある。header.phpと同じようにこのファイルもdiv要素にはさまれたコードのセクションから成る。この例ではこの要素はID「footer」を持っている。スタイルを整える前に、道に迷った「hr（水平方向の罫線）」をdiv内に移動しよう。

<hr />
<div id="footer">
	<p>
<a href="feed:<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>

. . .

上のコードを次のように：

<div id="footer">
<hr />
	<p>
<a href="feed:<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>

. . .

理由は後で分かるだろう。では、スタイルを追加しよう：

#footer
{
  clear: both;
}

これはフッターのどちらの側にも要素を浮かせない（floatさせない）ようにブラウザーに伝えるものだ。サイトを見てみると、サイドバーがきちんと適切な場所に収まって元のデザインにマッチしているのが分かるだろう。フッターの「hr」をdiv内に入れることによって水平罫線は横幅いっぱいに広がるようになった。