CSSの壁　（回答希望！→解決！）

LifeHack



今日はちょっと毛色の違うエントリ。


今、別のblogを、そのブログサービスが提供しているデザインテンプレートを使用せずにゼロから作ってる最中。仕事ではなく、趣味で。


そこで壁にぶつかってます・・・
どなたかCSS詳しい方、下記について教えて頂けないでしょうか？


まず、作ろうとしているレイアウトについて。

  • 作りたいのは、ヘッダとフッタの間に3カラムを横に並べた、ありがちなデザイン。
  • 全体の横幅ををウインドウに対して80%で設定したい。
  • ただし、横幅可変なのは3カラム中、真ん中の1カラムのみ。
  • 左右の10%＋10%には、bodyで指定した背景画像を出したい。
  • 80%の部分は白の背景色で塗り潰し。


これに対して、下記のようなHTMLを記述。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 

<html lang="ja">

<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>ページタイトル</TITLE>
<link REL="stylesheet" href="base.css" TYPE="TEXT/CSS">
<meta http-equiv="content-style-type" content="text/css">
</head>

<body>
<!-- Begin Container -->
<div id="container">
	<!-- Begin Header -->
	<div id="header">
	<h1>タイトル</h1>
	</div>
	<!-- End Header -->

	<!-- Begin Leftnavi -->
	<div id="leftnavi">
	左メニュー
	</div>
	<!-- End Leftnavi -->

	<!-- Begin Rightnavi -->
	<div id="rightnavi">
	右メニュー
	</div>
	<!-- End Rightnavi -->

	<!-- Begin Contents -->
	<div id="contents">
	中央エリア
	</div>
	<!-- End Contents -->

	<!-- Begin Footer -->
	<div id="footer">
	<p>footer</p>
	</div>
	<!-- End Footer -->
</div>
<!-- End Container -->

</body>

</html>


で、base.cssがこちら。

@charset "utf-8";

*{
	margin:0;
	padding:0;
}

html{
	height:100%;
	overflow-y:scroll;
}

body {
width:100%;
height:100%;
background-image : url(xxx.png) ;
background-repeat : repeat ;
}

#container {
margin:0 auto;
background-color:#fff;
width : 80% ; 
height:100%;
}

#leftnavi {
float:left; 
width:150px; 
background-color:transparent;
}

#rightnavi {
float:right; 
width:150px; 
background-color:transparent;
}

#contents {
margin:0 150px;
background-color:transparent;
}

#footer {
clear: both;
background-color:transparent;
}
  • bodyに背景イメージを設定し、
  • width80%、背景色白のcontainerで全体を包み、
  • 左右のボックスをフロートし、
  • clearしたfooterでcontainerのheightを伸ばす。

以上。


次に、現在発生している問題。

左右のフロートボックスにはメニューしか入らないので、ボックス自体のheightは短くなる。一方中央のボックスにはメインコンテンツが入るので、こちらは結構長くなる。
ボックスそれぞれのheightはバラバラだが、containerで包括しているので、headerからfooterまで、containerの背景色が適用されるはず。

だが、出来上がったものは、containerがfooterまで伸びておらず、コンテンツの途中までしかheightがない。よって、背景色も、途中までは白だが、途中からはbodyの画像を透過してしまう状況になっている。


色々調べて、clearfixハックでフロートをclearする方法なんかも試してみたんだけど、やっぱりダメ。

なんでやー！！
footerで「clear: both;」設定してることでcontainerは全部包括するんじゃなかったのかー。


あ、ちなみにIE6ならまったく正常に白い背景が横幅80%の範囲に表示されます。上記問題が起こるのは、firefoxの時。でもこれって、IEの方のバグなんだよな・・・


すごく悩んでます。
どなたか、CSS詳しいかた、コメント欄にて助言して頂けるととっても助かります。
よろしくお願いします。
（CSS詳しい人がこのページ見てるかどうかはなはだ疑問ですが）