CSSテクニックコミュのフッタが重なってしまう

はじめまして、タジーと申します。
現在作成中のサイトで、レイアウトの手段としてのテーブルは使用せず、CSSでやろうといろいろ試しております。
CSSはまだ勉強し始めたところで、今までテーブル＆スペーサーで作ってきた感覚が抜けきらず、なかなか思うようになりません。
スタイルシート辞典や参考書などでいろいろ調べているのですが、どうにも解らなくなってしまったので、質問させて頂きます。

サイト内のページの構成を左の画像のようなものに統一させ、ページ毎にcontentsの内容を変えたいと思っています。
ページによってそれぞれcontentsの高さ（height）が変わってきますが、footerは常にmainbodyの下に配置したいのです。

ですが現在のところ、右の画像のようにfooterが重なって配置されてしまいます。
どうもcontentsではなくmenuの高さによってその位置が変わってきています。

どうすれば左の画像のように配置できるのでしょうか。
header、mainbody、menu、contents、footerはそれぞれ#ID名で、html内ではそれぞれ
<div id="xxxx">～</div>
で記述しています。

お手数ですがよろしくお願いします。

コメント(18)

最初
全て
最新の40件

[1] mixiユーザー 04月04日 18:19

contentsレイヤー内にfooterレイヤーをネストすりゃいいんじゃないですか？bottom基準にして位置はマイナスに。menuのサイズは変わらない＆menuよりcontentsの方が背が低いってことが無ければそれでOKかと。

[2] mixiユーザー 04月04日 18:22

いろいろやり方はあると思うんですが、
menuとcontentsのブロックをfloatさせてるのであれば
mainbodyもfloatさせないと、高さがうまくレンダリング
できずに、footerの開始位置がズレる気がします。

[3] mixiユーザー 04月04日 18:30

menuとcontentsの2段組をどのようなやり方で実現しているのかによって解決策も変わってきそうなので、その部分のスタイルを公開していただけるとよいかと思います。

[4] mixiユーザー 04月04日 19:02

これって、Contentを絶対値で配置したんでないん？

わからないけど、とりあえず上記３人の話とおりソースみないとと判断できないところですが・・・
試しに、id="footer"に[position: relative;]を入れてみてくださいな。

[5] mixiユーザー 04月04日 19:31

皆様、早速ありがとうございます。

micnakさんのやり方だと、footerが画面右側に寄ってしまうので、私の意図するモノとは違ってきてしまうように思います。
ですが、「bottom基準でマイナス指定」というのは目からウロコです！CSSの柔軟性と自由さを垣間見た思いです。ありがとうございます。

宙蔵さんにご指摘いただいた、mainbodyにもfloat指定というのは気づきませんでした。
ありがとうございます。

かわち丸さん、以下にスタイルを記述致します。
宜しくご教授下さいますようお願いします。

#mainbody {
display:block;
float:left;
padding:0px;
margin:0px;
width:720px;
}

#menu {
display:block;
float:left;
width:160px;
margin:2px;
padding:0px;
}

#contents {
position:absolute;
display:block;
float:right;
left:164px;
width:556px;
margin:0px;
padding:2px;
}

#footer {
display:block;
margin:0px;
padding:0px;
text-align:center;
}

br{clear:both}

htmlの方でmainbodyとfooterの間に改行<br>を入れて、回り込みを解除しています。

ガク巡査さんの仰る通り、contentsをposition:absoluteで配置しています。
こうしないと、何故か中が崩れてしまうのです。

[6] mixiユーザー 04月04日 19:55

clearは、#footerのほうで良いのでは？

[7] mixiユーザー 04月04日 21:11

こんな感じでいかがでしょう。

--HTML--
<body>
<div id="box">

<div id="head">
ヘッダヘッダヘッダヘッダヘッダヘッダヘッダヘッダヘッダヘッダヘッダヘッダヘッダ
</div>

<div id="menu">
メニューメニューメニューメニューメニューメニューメニューメニューメニューメニューメニューメニューメニューメニュー
</div>

<div id="cont">
コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ
</div>

<div id="foot">
フッタフッタフッタフッタフッタフッタフッタフッタフッタフッタフッタフッタフッタ
</div>

</div>
</body>

--CSS--
#head {background: #cef;}
#menu {background: #dfc;}
#cont {background: #ffc;}
#foot {background: #fcd;}

#head,#foot {width: 700px;}
#menu {width: 200px;float: left;}
#cont {width: 500px;float: right;}
#foot {clear: both;}
#box {width: 700px;}

-----------------------------------------
#head → h1
#menu → ul
#foot → address
等にしたほうがHTML的には良さそうですが、とりあえずdivで。

[8] mixiユーザー 04月04日 21:57

皆様ありがとうございます。
お陰様で、どうやらcontentsのposition:absoluteが悪さをしているように思えてきました。
引き続き、いろいろやってみます。

[9] mixiユーザー 04月04日 22:05

すみません、軽くしか見てないので
間違えた答えかもしれませんが
（適当に書いたので見直してください）

恐らくIDの考え方が間違えているのでは？？

#head {
padding:0px;
width:720px;
height:100px;
background-color: #CCCCCC;
}

#main {
padding:0px;
width:720px;
height:400px;
background-color: #999999;
}

#footer {
padding:0px;
width:720px;
height:100px;
background-color: #CCCCCC;
}

.manu {
float:left;
width:160px;
height:200px;
padding:0px;
background-color: #FFCC00;
}

.contents {
float:left;
left:164px;
width:556px;
height:400px;
padding:0px;
background-color: #FFCCFF;
}

<body>
<div id="head">head</div>
<div id="main">
<div class="manu">manu</div>
<div class="contents">contents</div>
</div>
<div id="footer">footer</div>

※heightはあたりです。消しても大丈夫です。

[10] mixiユーザー 04月04日 22:54

＞footerが画面右側に寄ってしまうので、私の意図するモノとは違ってきてしまう
同じ理屈でleft基準のマイナス指定でmenu幅分左に寄せちゃダメですか？

皆さんの書き込み見ると、mimizqさんのがスマートでいいんじゃないですかね。

[11] mixiユーザー 04月04日 23:35

＞ハッシャンさん
ありがとうございます。
早速試してみます。

＞micnakさん
重ね重ねご指摘頂き、目からウロコ落ちまくりです。
私はまだまだ頭が固い＆勉強不足ですね。
ありがとうございます。

[12] mixiユーザー 04月05日 01:24

mimizqさんが示しているものと同じ感じですが、contentsをposition:absolute;でなく、float:left;もしくはfloat:right;にして、footerでclear:both;とするとよいと思います。

絶対配置は周りの要素とは関係なく(?)独立する感じになるので、その高さなどは後続の要素（ここではfooter）の配置に影響を与えないので注意です。

タジーさんのスタイルだと、#contentsにpositionとfloatが両方指定されているのが問題で、この場合、positionが優先されてfloatの値はnoneであるという風にみなされるため、このような崩れが起きたのではないかと。

あと、#mainbodyには寄せる要素はないと思うので、ここにはfloatは要らないかなと思います。

[13] mixiユーザー 04月05日 01:43

＞ガク巡査さんの仰る通り、contentsをposition:absoluteで配置しています。
＞こうしないと、何故か中が崩れてしまうのです。

この部分を見過ごしていましたー
よくある2段カラムで両方にまたぐフッターを置くならやはり#contentsの中の崩れをなんとか解消して（無責任ｗ）floatさせるのが良いかと思います。

micnakさんのcontentsレイヤー内にfooterレイヤーをネストしてマイナスの値で位置指定する解決策もいいアイデアだと思いますし、やり方はそれぞれあってよいと思うのですが、できることなら最初に決めたHTMLの構造はそのままで、が理想かなとｗ

・・・なかなかそれが難しかったりもするのですがｗ

[14] mixiユーザー 04月05日 01:58

構造化するために、ブロック要素のグループ化をするために
DIVを増やすのは、まあ仕方がないのでは。

[15] mixiユーザー 04月05日 08:47

僕も構造化とかそういった目的ならもちろんDIVは増やしていいと思いますよ。むしろそれが必要ならそうすべきと思います。

[16] mixiユーザー 04月05日 14:09

皆様本当にありがとうございます！
mimizqさんやハッシャンさんにご提示頂いたように、簡単なテストモデルを作って、その上でいろいろプロパティなど検証していくという手法で現在進めております。
やはりposition:absoluteが悪さをしていたようです。
お陰様でpositionやfloat、IDやclassについても理解が深まった思いです。
そして、CSSって面白いかもって初めて思えてきました。
この勢いで引き続き進めていきます。

[17] mixiユーザー 04月05日 19:38

皆様ありがとうございました。
おかげで上手く配置させることができました。
ボックスを入れ子にする場合は、widthやmargin、padding設定をかなりきっちりツメないとダメだということがよく解りました。
今回の事象を通じて、とても勉強になったと思います。
こちらで質問してよかったです。
今回は大変ありがとうございました。
また機会がありましたらよろしくお願いします。

[18] mixiユーザー 04月11日 00:26

もう解決されてるかも知れませんが気になったので。

#mainbodyのwidth内に#menuと#contentsのwidth、margin、padding合計が収まってないのでは。

#mainbody=720(width)
#menu=160(width)+2×2(margin)
#contents=556(width)+2×2(padding)
単位：px

720(#mainbody) < 724(#menu + #contents)

このままrelativeで配置すると#menuの右隣の領域に#contentsが収まらないので下に行ってしまいます。

↓は一応、IE6とNN7.1で確認したサンプルです。
(#contentsのwidthは552pxですが、IEだとうまく表示できなかったので、550pxにしてます。)

【CSS】
*{margin:0; padding:0;}

#header{border:1px solid blue;}
/*#mainbody{border:1px solid #000;} */
/*#menu{border:1px solid yellow;} */
/*#contents{border:1px solid green;} */
#footer{border:1px solid red;}

#mainbody {width:720px;}
#menu {float:left; width:160px; margin:2px;}
#contents {float:right; width:550px; padding:2px;}
#footer {clear:both; text-align:center;}

【html】
<div id="header">
<p>ヘッダ</p>
<p>ヘッダ</p>
</div>
<div id="mainbody">
<div id="menu">
<p>メニュー</p>
<p>メニュー</p>
</div>
<div id="contents">
<p>コンテンツ</p>
<p>コンテンツ</p>
<p>コンテンツ</p>
</div>
</div>
<div id="footer">
<p>フッタ</p>
<p>フッタ</p>
</div>

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