前回のエントリーでは2段組まで完成させました。
たぶんあと一息です。

取りあえず前回の最終系が下記です。
http://css-happylife.com/template/practice-01/08/

今回はフッター部分の作成です。

んでは、いってみますか、、、

---

div#footを追加

まずはdiv id="foot"をHTMLに追加します。

<!-- / container END --></div>
<div id="foot">
・
・
・
<!-- / foot END --></div>

続いてスタイルの指定ですが、footを追加する際の留意点として、div containerの終了タグの後にdiv footを追加します。
containerの中にfootを入れてしまうと、サイドの背景がフッターとぴったりくっついてしまうので、ソレを避ける為にやってます。

/*
 foot [
----------------------------------------------------------- */
#foot {
	clear:both;
	margin:0 10px;
	padding:5px 0 10px 0;
	text-align:center;
	border-top:1px solid #CCC;
}

ここで大事なのは、必ず回り込み（float）をclear:bothで解除してあげる事です。
IE辺りはあんまり崩れませんが、Firefoxだとborder-topが上の方までいっちゃうのが確認できます。

marginを左右に10px取っているのはborderが左右にくっ付かないようにしてます。

上記スタイルを適用させると下記のような感じに。
http://css-happylife.com/template/practice-01/10/

続いて、フッター部分のメニューの調整とCopyrightの調整をします。

#foot p {
	margin:0 0 2px 0;
}
#foot address {
	font-style:normal;
}

「まずは構成。んで全体、headerをば」の全体に共通の指定をする部分で、p要素に、

p {
	margin:0 0 1em 0;
}

と指定していたので、ソレを上書きしてます。

address要素は、大半のブラウザのデフォルト表示がイタリックなので、デザインにあわせる為に、font-style:normalを指定し整えます。

コレでフッター部分が完成です。
実際の画面は下記になります。
http://css-happylife.com/template/practice-01/11/

フッター部分で一番重要なのは、2段組の時にfloatで回り込みをしていたのを必ずclearで解除してあげる事です。

ちなみにclearは一方の解除も指定出来るので、clear:leftで左の回り込みを解除でもOKです。

フッター部分のメニューはli要素でやると、多少複雑になってくるのもあり今回はp要素でやってます。

フッター部分に関しては以上です。
サイドまでやっちゃおうと思ったけど眠いので今日はココまで。

お疲れ様でした。