floatした2カラムの記事の背景が・・・

複数カラムの記事を書こうと思うと、フロートかけますが、floatって、CSSビギナー泣かせと思います!!(←強く主張)
Floatかけると、かかったDIVを、親が高さを認識してくれないから、背景をキレイに表示させてくれないしぃ(シクシク、clearfixに行き着くまで、数日)。

最近、やっと、どんなときclearfix使えばよいか、な~んとなくわかってきましたが、あたらな苦悩に出会いました。複数カラムの高さが不ぞろいなとき、内包するDIVの高さを長いほうにあわせたいっっ、というのにうまくいきませんでいた。

HTML


<div id="wrapper">
<div class="firstpara">
<h1>1段落目の見出し</h1>
<p>1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、1段落目、
</p>
</div>
<div class="secpara">
<h1>2段落目の見出し</h1>
2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、2段落目、
</div>
</div>

CSS


* {
	margin:0;
	padding:0;
}
#wrapper {
	width:600px;
	margin:auto;
	zoom:1;
}
#wrapper:after {
	display:block;
	content:".";
	height:0;
	visibility:hidden;
	clear:both;
}
#wrapper div.firstpara {
	float: left;
	width:300px;
	background-color:#F00;
}
#wrapper div.secpara {
	width:300px;
	float:left;
	background-color:#3C6;
}

これに呪文CSSを書き加えると

やったぁ、高さが短い2段落目も下まで背景がありますぅ。これなら、真ん中に仕切り線入れるときに、高さが高いほうをいちいち見つけていってborderをつける必要がなくなりますぅ。3カラムになると、長いほうを選んで、なんてやって行くのは、不可ですしね。


* {
	margin:0;
	padding:0;
}
#wrapper {
	width:600px;
	margin:auto;
	overflow:hidden;
	zoom:1;
}

#wrapper:after {
	display:block;
	content:".";
	height:0;
	visibility:hidden;
	clear:both;
}#wrapper div.firstpara {
	float: left;
	width:300px;
	background-color:#F00;
	padding-bottom:32768px;
	margin-bottom:-32768px;
}
#wrapper div.secpara {
	width:300px;
	float:left;
	background-color:#3C6;
	padding-bottom:32768px;
	margin-bottom:-32768px;
}

これって、つまりはネガティブマージンとかを使ってるってことですよね?
まず、内包するDIVを、パディングボトムで、ぐぐっとうーんと下まで伸ばしちゃいます。これで、見える限り下まで伸びます。パディング領域には、背景やボーダーはつけられるので、これで背景がつきます。でも、これじゃ、ずずーんと限りなく下まで領域が伸びちゃってるから、とりあえず上へ領域を戻してこなきゃねってことで、ネガティブマージンでパディング分を上げてきます。それから、あふれ出ちゃったとこは、表示しないでねっていうことで、親のDIVにオーバーフローヒドゥンをつけてやって、元の高さに戻って一件落着、大岡裁きのように、よかったよかった、ってことなんじゃないでしょうか?

ちなみに、親DIVにoverflow:hiddenをつけ忘れると、線路は続くーよってな具合に、ずろーんっ、びろーんっと、どこまでもコラムがのびてしまって、ちょっと大変・びっくりなことになります。ブラウザって、こんなに伸びるんだって、ちょっとおどろきました。伸縮性があるんですね。ブラウザ。

ということで、なんとかグーグル先生の力を借りて、苦境をひとつ乗り越えましたが、わかったような、わからないような・・・。ふふっ、クリアにわかるよっ、っていえるように、勉強しなきゃねと、とほほな見習いは思うのでした。めでたしめでたし。(←本当にめでたいのだらふか・・・)

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


コメントフィード

トラックバックURL: https://pc.beginners-luck.net/pcwp/2011/10/30/float-height.html/trackback