CSSテクニックコミュのposition指定をしたときのfooter要素について質問

大変初歩的な質問なのですがどうぞ宜しくお願いします。
現在環境はwinXP、firefoxとIEでテストしています。

2段組2列のページを作ろうとしています。ブログ（MT）用なので
htmlの構造はあまり崩したくないと思っています。
各コンテナはpositionと数値で指定しました。

■まず、最後のfooterを、一番下に指定したいのですが
positon:absolute/bottom:0px;で指定する方法しか思い当たりません。
ウィンドウの一番下に常にはりついている状態となり、
上の要素の高さがウィンドウに対して十分でない場合、隙間が開くことになってしまいます。

floatだと横幅を数値指定したとき、ブラウザごとの不具合があまりにも大きいので
（ブログなので更新が頻繁・本文要素のなかに横幅オーバーの画像などを入れてしまって
気づかない、などなどのことがあったので←気をつけてやればいいことなのですが…）
できればposition指定をしてやってみたいのです。
floatでしか回避できないでしょうか？

■また、コンテナ要素を中央ぞろえにしたいのですが、
footerのみfirefoxでは左ぞろえ、IEだとウィンドウの中央になってしまうのです。
（IE対策のつもりで親要素になるbodyにはtext-align:centerをあてています）

この点は、すべての要素をひとつのあらたなコンテナで囲み、
それを中央ぞろえにしてみたのですが、footerに関してはダメでした。
（後にこちらのトピック
http://mixi.jp/view_bbs.pl?id=7347690&comm_id=15544&page=all
で、ネガティヴマージンというものを知ったので試してはみたいのですが
どちらにせよ親要素をhtmlに増やすのは最後の手段にしたいと思っています）

http://www.liquiddive.com/sample.html
http://www.liquiddive.com/style.css

//htmlソース//

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>

<div class="heading1">
<h1><img src="title01.gif" alt="タイトル" width="180" height="180" /></h1>

<div id="entries">

<div class="heading2">
<div id="date">ＤＡＹ1日付</div>

<div class="heading3">

<h2>ＤＡＹ1エントリ1</h2>

<p>本文</p>
<p>本文</p>
<p>本文</p>

</div>
</div>

</div>
<div id="utilities">
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
<li>メニュー5</li>
<li>メニュー6</li>
</ul>
</div>

</div>

<div id="footer">
<p>クレジット／コピーライト</p>
</div>
</body>
</html>

//htmlソースここまで//

//CSSソース//

.body {
text-align: center;

}
.heading1 {
width: 600px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
text-align: left;
position: relative;
height: 100%;
}

.heading1 #entries {
position: absolute;
width: 390px;
left: 200px;
top: 20px;
}
.heading1 #utilities {
position: absolute;
width: 180px;
left: 0px;
top: 220px;
}
#footer {
position: absolute;
bottom: 0px;
width: 600px;
margin-right: auto;
margin-left: auto;
text-align: center;
}

//CSSソースここまで//

コメント(3)

最初
全て
最新の40件

[1] mixiユーザー 09月11日 13:48

追記です。
上記のソースをMACIE5.1で見てみたら、
フッター自体がどこかへ行ってしまっていました；
OSXの環境が今ないので、そちらではどう見えるかは
わからないのですが、これらはよくあるバグ？エラー？
なのでしょうか…

[2] mixiユーザー 09月11日 19:30

こんばんは。

position: absolute;
bottom: 0px;
で、クロスブラウザは厳しい気がします。

「floatを使いたくない」だけであるならば、以下の方法のご検討はいかがでしょうか。

http://nuts.seeda.jp/test/css02/
※例のソースを使っていますが、検証しやすさのためCSSとHTML合体させています。

■HTML変更点
・div class="heading1"の閉じタグの位置変更

■CSS変更点
・#entriesの指定変更
・.heading2の新規指示
・#footerのposition削除

＃メニューより縦幅が長くなりやすい本文の部分をpadding指定でメニュー分余白をとり、その余白にメニューや画像を飛ばすようにしました。
footerは本文内容の下に常に入るようになるため、形は崩れにくいかと思います。

[3] mixiユーザー 09月12日 00:09

nutsさん
お答えありがとうございます！
試してみました。解決です！
そうか～～！と心から納得です。
padding部分に他要素の絶対指定は全く思いつきませんでした。
Utilitysだけが絶対指定によって左の任意の場所に配置され、
Entriesの下にfooterがUtilityを飛び越えて流れこんだ、ということになるんですよね。

勉強になります。本当に有り難うございます。
3ペインの場合にも左右paddingを取って…というやりかたで使えますね。
絶対指定がよくわかってなかったんですが、幅がひろがりそうです。

ログインすると、みんなのコメントがもっと見れるよ