フッターが表示されない

フッターを表示させたい

Adobe Dreamweaverで、HTMLを用いて
練習サイトを作っています。
HTMLと、CSSでフッターを作っているのに表示できません。
打ち間違えがないか確かめたり、値を変更したりしてみましたが解決できなかったので
質問させていただきました。
以下にコードをコピペしますので診てください。

（CSS）

 @charset "UTF-8";
/* CSS Document */


body{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-image: url("imagesのコピー/body_border.gif");
	background-repeat: repeat-x;
	
}

#container {
	width: 900px;
	height: 600px;
	margin: 0px auto 0px auto;
	float: none;
}

header{
	height: 120px;
	width: 900px;		
}

header h1{
	margin: 0px;
	padding: 0px;

}

header #Logo_area {
	float: left;
	height: 100px;
	width: 300px;
}

header #Logo_area h1 {
	margin-top: 40px;
}

header #Navi_area {
	float: right;
	height: 100px;
	width: 580px;
}

header #Navi_area #banner{
	float: right;
	margin-right: 30px;
	margin: 0px;
    padding: 0px;

	
}

header #Navi_area ul{
	list-style-type: none;
	font-size: 10px;
	margin-top: 100px;
}

header #Navi_area li{
	display: inline;
	float: right;
	width: 70px;
	border-left-style: solid;
	border-left-width: 1px;
	border-left-color: #050505;
	padding-left: 8px;
}

header #Navi_area li a{
	text-decoration: none;
	color: black;
}

header #Navi_area li a:hover{
	color: #09f;
	text-decoration: underline;
}

main{
	height: 600px;
	width: 900px;
	
}

main #Side_navi {
	height: auto;
	width: 210px;
	float: left;
	margin-top: 30px;
}

#Side_navi ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: black;
}

#Side_navi ul #navi01 {
	margin: 0px;
	padding: 0px;
	width: 210px;
	height: 46px;
	background: url("imagesのコピー/SideNavi_Top_out.gif")no-repeat;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: black;
}

#Side_navi ul #navi02 {
	margin: 0px;
	padding: 0px;
	width: 210px;
	height: 46px;
	background: url("imagesのコピー/SideNavi_Event_over.gif")no-repeat;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: black;
}

#Side_navi ul #navi03 {
	margin: 0px;
	padding: 0px;
	width: 210px;
	height: 46px;
	background: url("imagesのコピー/SideNavi_Owners_over.gif")no-repeat;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: black;
}

#Side_navi ul #navi04 {
	margin: 0px;
	padding: 0px;
	width: 210px;
	height: 46px;
	background: url("imagesのコピー/SideNavi_ModelHouse_over.gif")no-repeat;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: black;
}

#Side_navi ul #navi05 {
	margin: 0px;
	padding: 0px;
	width: 210px;
	height: 46px;
	background: url("imagesのコピー/SideNavi_Blog_over.gif")no-repeat;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: black;
}

#Side_navi ul #navi06 {
	margin: 0px;
	padding: 0px;
	width: 210px;
	height: 46px;
	background: url("imagesのコピー/SideNavi_Event_over.gif")no-repeat;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: black;
}

#Side_navi ul #navi07 {
	margin: 0px;
	padding: 0px;
	width: 210px;
	height: 46px;
	background: url("imagesのコピー/SideNavi_Recruit_over.gif")no-repeat;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: black;
}

#Side_navi ul a:hover img {
	visibility: hidden;
}



#Side_navi ul h2 {
	margin: 0px;
	padding: 0px;
}

main #Main_box {
	height: auto;
	width: 450px;
	float: left;
	margin: 30px 0px 0px 20px;
}

#Main_box .MainBox_item {
	width: 450px;
	float: left;
	margin-bottom: 20px;
}

#Main_box .MainBox_item .MainTitle {
	background-image: url("imagesのコピー/MainTitle.gif");
	width: 450px;
	height: 25px;
	margin-top: 0px;
	margin-bottom: 7px;
}

#Main_box .MainBox_item .MainTitle h2{
	font-size: 12px;
	color: #4A4A4A;
	margin: 0 0 0 10px;
	padding: 1px;	
}

#Main_box .MainBox_item .MainBox_right {
	font-size: 11px;
	float: right;
	width: 250px;	
}

#Main_box .MainBox_item img {
	float: left;
}

#Main_box .MainBox_item a {
	color: #F63;
	
}

main #Banner_box {
	height:300px;
	width: 200px;
	float: right;
	margin-top: 30px;
	background-color: blue;
	
}

hooter{
	clear: both;
    height: 20px;
    width: 900px;
    background-color: #000;
    font-size: 10px;
    text-align: center;
    color: #FFF;
    line-height: 17px;
    margin: 0 auto 0 auto;
	
	
}



```HTML

<!doctype html> <html> <head> <title>住宅設計施工の美浜工務店</title> <meta charset="utf-8"> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <header> <div id="Logo_area"> <h1><a href="#"><img src="imagesのコピー/Logo.gif" alt="美浜設計株式会社"＞</a></h1> </div> <div id="Navi_area"> <div id="banner"><a href="contact.html"><img src="imagesのコピー/Contact.gif" alt="お問い合わせ"＞</a></div> <ul> <li><a href="contact.html">資料請求</a></li> <li><a href="#">サイトマップ</a></li> <li><a href="#">リクルート</a></li> <li><a href="#">トップ</a></li> </ul> </div> </header> <main> <img src="imagesのコピー/MainImage.jpg" alt="メイン画像" > <div id="Side_navi"> <ul> <li id="navi01"> <h2><a href="#"><img src="imagesのコピー/SideNavi_Top_over.gif" alt="トップ" ></a></h2> </li> <li id="navi02"> <h2><a href="#"><img src="imagesのコピー/SideNavi_Guide_out.gif" alt="会社概要" ></a></h2> </li> <li id="navi03"> <h2><a href="#"><img src="imagesのコピー/SideNavi_Owners_out.gif" alt="実例集" ></a></h2> </li> <li id="navi04"> <h2><a href="#"><img src="imagesのコピー/SideNavi_ModelHouse_out.gif" alt="モデルハウス" ></a></h2> </li> <li id="navi05"> <h2><a href="#"><img src="imagesのコピー/SideNavi_Blog_out.gif" alt="匠のブログ" ></a></h2> </li> <li id="navi06"> <h2><a href="#"><img src="imagesのコピー/SideNavi_Event_out.gif" alt="見学会" ></a></h2> </li> <li id="navi07"> <h2><a href="#"><img src="imagesのコピー/SideNavi_Recruit_out.gif" alt="資料請求" ></a></h2> </li> </ul> </div> <div id="Main_box"> <div class="MainBox_item"> <div class="MainTitle"><h2>トピックス&emsp; [TOPICS]</h2></div> <img src="imagesのコピー/MainBox_Image.jpg"> <div class="MainBox_right"><a href="＃">人気のスマートハウスシステム</a><br><br> Mi SmartSystem<br><br> 最新のテクノロジーを採用し、地球環境にやさしい省エネ住宅を実現！！</div> </div> 新着情報　[NEWS]

2013年8月12日雑誌に掲載されました

注文住宅専門誌「The Housing」に当社の建築技術が紹介されました。

2013年8月10日新築見学会開催のお知らせ

9月10日（土）、9月11日の２日間、当社施工中の新築住宅の見学会を建て主様の許可を得て開催致し
ます。引き渡し直前の新築住宅が見学できる貴重な機会です。みなさまのご参加をお待ちします。

2013年7月20日最新スマートハウス見学会?8月10日（土）、8月11日の２日間、当社設計施工の最新の
スマートハウス見学会を開催します。ソーラーパネルを使った売電システム。内外気の循環を使った
快適な保温システムによる暖房費、冷房費の節約、燃料蓄電池を使った効率的な蓄電システムなど最
新の技術の実例をお見せします。

2013年7月10日建築資金計画相談会?7月20日（土）、7月21日の２日間、金融公庫や金融機関からの借
入、利用できる補助金や節税などを金融プランナーが詳しく解説、お客様ひとりひとりに応じた資金
計画を立案します。

2013年6月22日リフォーム相談会?7月1日（土）、7月2日の２日間リフォーム相談会を開催します。シ
ステムキッチンや子ども部屋のリフォームの他、現在の宅地をそのまま使った２世代住宅への立て替
えなど大規模なリフォームの相談も受け付けます。

最新のブログ記事　[BLOG]

９月は連休が２回あり、例年住宅展示場はどこも家族連れのみなさんで賑わいます。今年はさらに消
費税増税前の駆け込みということもあり、沢山の人手増が期待されています。（...） </div>
<div id="Banner_box"></div>
</main>
<footer></footer>

</div> </body> </html> ```

試したこと

一行ずつ確かめ作業をした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

footerをhooterと打ち間違えているためではないでしょうか。この箇所を修正すると、質問者さんの実現したいことが行えると思います(動作確認用リンク)。

CSS
1footer { /* 修正 */
2  clear: both;
3  height: 20px;
4  width: 900px;
5  background-color: #000;
6  font-size: 10px;
7  text-align: center;
8  color: #fff;
9  line-height: 17px;
10  margin: 0 auto 0 auto;
11}