0

FC2ホームページでのレイアウト崩れについて (その２）

前回の質問でFC2のホームページのレイアウト崩れの質問をしました。
その後、タグを検証してみました。 １．バックのグレーの部分が見えないようにしたい
これについては「bodyの背景色」がグレー設定しています。
画面の両サイドにグレーの縦の帯状の部分を作りたいので
bodyをグレー設定にして、containerの背景を白の設定で
ページを構成しています。

２．FC2のホームページへ少しずつタグを貼ってアップしたところ
トップページ（index.html）はフッターのタグを貼った時に
レイアウトが崩れます。
貼ったフッターのタグは下記です。

<div id="footer"></div>

ちなみに、スタイルシートが違う他のページも同様に試したところ
上記と同じタグを貼ってもレイアウトの変化は起こりませんでした。


トップページと他のページのスタイルシートの違いは
#page_contentの有無です。
トップページの#page_contentに画像を貼っています。



スタイルシートの内容は下記の通りです。

◎トップページのスタイルシート
body {
color: #000;
font-size: small;
font-family: "ＭＳ Ｐゴシック", Arial, sans-serif;
font-style: normal;
background-color:#abc;
}
#container {
margin: auto;
width: 1100px;
height: 1760px;
background: #FFFFFF;
}
#masthead {
width: 1100px;
height: 189px;
overflow: auto;
background-color: #FFFFFF;
}
#navigation {
width: 1100px;
height: 40px;
margin: 0;
padding: 0;
border: 0;
clear: both;
background-color: #FFFFFF;
overflow: hidden;
font-size: 18px;
}
#page_content {
width: 1100px;
height: 324px;
background-color: #FFFFFF;
}
#column_l {
width: 310px;
height: 1147px;
position: relative;
float: left;
margin: 0 0 0 0;
background-color: #FFFFFF;
padding: 0 0px 0px 0px;
}
#column_r {
width: 790px;
height: 1147px;
float: left;
padding: 0px;
margin: 0 0 0 0;
background-color: #FFFFFF;
}
#footer {
width: 1100px;
height: 60px;
clear: both;
overflow: auto;
text-align: center;
background-color: #FFFFFF;
border-top-style: double;
border-top-width: 3px;
border-top-color: #0000FF;
}

◎他のページのスタイルシート

body {
color: #000;
font-size: small;
font-family: "ＭＳ Ｐゴシック", Arial, sans-serif;
font-style: normal;
background-color:#abc;
}
#container {
margin: auto;
width: 1100px;
height: 1760px;
background: #FFFFFF;
}
#masthead {
width: 1100px;
height: 189px;
overflow: auto;
background-color: #FFFFFF;
}
#navigation {
width: 1100px;
height: 40px;
margin: 0;
padding: 0;
border: 0;
clear: both;
background-color: #FFFFFF;
overflow: hidden;
font-size: 18px;
}
#page_content {
width: 0px;
height: 0px;
background-color: #FFFFFF;
}
#column_l {
width: 310px;
height: 1451px;
position: relative;
float: left;
background-color: #FFFFFF;
margin-top: 20px;
}
#column_r {
width: 790px;
height: 1451px;
float: left;
background-color: #FFFFFF;
margin-top: 20px;
}
#footer {
width: 1100px;
height: 60px;
clear: both;
overflow: auto;
text-align: center;
background-color: #FFFFFF;
border-top-style: double;
border-top-width: 3px;
border-top-color: #0000FF;
}


フッターのタグが原因だというところまでは分かったのですが
そこから先の訂正方法が分からず困っております。
長々とスタイルシートまで書いてしまいお恥ずかしい限りです。

重ねて他の質問になり申し訳ありませんが、
sitakirisuzume567さまより教えていただいた文法チェックのページで
チェックをしました。
私の作成しているページにYahoo地図へリンクする為のタグがあり
そのタグはYahoo地図のページからタグをコピーしたものです。
そのタグが文法チェックで不明な実体参照としてチェックされました。
（`&lat``&lon``&ei``&sc``&datum``&gov``&ac``&az``&layer``&v`）
タグを修正したいのですが、解説を読んでも理解が出来ないでいます。
不明な実体参照について初心者でも勉強できるホームページなどあれば
教えて頂ければ幸いです。


厚かましい質問になり大変恐縮です。
どうぞよろしくお願い申し上げます。

質問者が選んだベストソリューション

Yahoo!知恵袋 4016日前