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
をつけ忘れると、線路は続くーよってな具合に、ずろーんっ、びろーんっと、どこまでもコラムがのびてしまって、ちょっと大変・びっくりなことになります。ブラウザって、こんなに伸びるんだって、ちょっとおどろきました。伸縮性があるんですね。ブラウザ。
ということで、なんとかグーグル先生の力を借りて、苦境をひとつ乗り越えましたが、わかったような、わからないような・・・。ふふっ、クリアにわかるよっ、っていえるように、勉強しなきゃねと、とほほな見習いは思うのでした。めでたしめでたし。(←本当にめでたいのだらふか・・・)
2011年10月30日11:52 PM|
カテゴリー:
HTMLとCSSのコード,スクリーンショット,見習い奮闘記|
コメント
(1)
コメント
[…] floatした2カラムの記事の背景が・・・ div要素の引き伸ばし2 […]
2013年11月8日 6:27 PM| HP制作に役に立ったサイトメモ | のえさん家
コメントフィード
トラックバックURL: https://pc.beginners-luck.net/pcwp/2011/10/30/float-height.html/trackback