スタイルシートでうまくフッター部分を配置設定する方法を教えてください。

質問

スタイルシートに詳しい方に教えていただきたいのですが、
今ホームページを作っていて、
フッター部分の設定に困っています。

タイトルカラム
左カラム
コンテンツカラム
フッターカラム

というページ構成で
絶対指定で top と left を使って
各要素の位置指定をしているのですが、
フッター部分だけうまくいきません。

フッターに
「Copyright (C) ●● All Rights Reserved.」
という文言をタイトルカラムと同じ width で入れたいのです。

なぜか title カラムの下に表示されたり、
画面の一番上に表示されたりするのです。

bottom を使用するのかな？
と思ったのですが、それでもうまくいきませんでした。

できるだけページ全体を table タグを使って
デザインしたくなくて、スタイルシートであれこれ
やっているのですが、苦戦しています（汗）。

スタイルシートを下記しますので、
お知恵をお貸しくださいませ。

--------------------

div.title {
position: absolute;
top: 0px;
left: 20px;
width: 800px;
background-color: #ffffff;
height: 412px;
}

.left {
width:185px;
position: absolute;
top: 415px;
left: 20px;
background-color:#ffffff;
}

.content {
position: absolute;
top: 415px;
left: 205px;
width: 600px;
text-align: left;
}

.footer {
position: absolute;
bottom: 0px;
left: 20px;
width: 800px;
text-align: left;
height: 100px;
}

回答No.1

noname#36864 · ベストアンサー

bottomはそのブロックの下の位置を指定するんだと思いますよ。
例えば
footer {
position: absolute;
top:0;
bottom: 100px;
left: 0;
right:100px;
}
と書くと結果的に幅と高さを決めて位置も決まるのだと思いました。

ですからtopを実数で指定すれば良いのですが、タイトルカラムとフッタカラムの間にどのくらいの距離を作るのが良いのかが解らないと書くことができません。
そこでJavaScriptなどでそれを計算すれば良いのですが、レイアウト関連ですとJavaScriptの有効無効の問題もありなかなか踏み切れないと思います。

そんなことで左カラムとコンテンツカラムをfloatを使ってレイアウトするか左カラムをposition: absolute;にしてコンテンツカラムをNormal flowにするなどの方法があります。

両方floatを使ったらフッタカラムでclear:bothをすればコンテンツカラムの高さに合わせて上手く配置されます。
左カラムにfloatを使いコンテンツカラムはNormal flowでも良いのですがコンテンツカラムの配置にIE6で3px程度の意味不明なズレが出ます。

両方floatを使うと起こりません。

コンテンツカラムに幅が指定できるのでしたら左カラムをfloat:left,コンテンツカラムをfloat:rightでも良いと思います。
IE6で見たときの教えてgooのトップページがそうなっていると思います。

左カラムをposition: absoluteにすると、その要素は無いものとして続く要素が配置されますので、フッタカラムはコンテンツカラムに続いて配置されますが、左位置を実数で指定できるレイアウトにしなければなりません。

left:autoにすると一見ブラウザ任せで位置が決まり、良いように見えますが、リサイズ時にIE6でズレが発生しますし、それに続くコンテンツカラムのpadding位置に配置されてしまいます。まるで続く要素が作るブロックがそれの包含ブロックになっているかのように見えます。W3Cの勧告と比較するとこれは誤りだとおもいました。

やはり素直にfloatを使うのがよろしいかと思います。

お礼

float を使うんですね。

無事に解決しました。

ご丁寧にありがとうございました。

回答No.2

goldfox

>>0　にかかれたソースで、問題なく下部固定できていると思います。
「うまくいかない」とありますが、なにがどう上手くいかないのでしょう？
なお、高さ指定のあるtitleとfooterにはテキストではなく、同じ高さの画像を入れたほうが、表示確認も分かりやすいと思います。
大きさの違うブラウザでどのような表示にしたいかによっても、アドバイスは変わってきそうです。

余談ですが、800×600サイズのブラウザでは、ほとんどtitleのみで画面内が占められています。
そこに、表示領域の下部固定高さ100pxのfooterがあるので、重なってしまっています。

お礼

float タグを使って解決しました。

実際のページを表示できないので、
文言による説明だけでは難しいところもありますよね。

分かりにくくてすみませんでした。