「float」で親要素の高さがなくなってしまったときは親要素に「float」【CSS】
1年以上前の記事です。内容が古い可能性があります。
HTML・CSSコーディングで2カラム、3カラムを実装するときに最も使用頻度の高いCSSプロパティはfloatでしょうね。
左のボックス(div等)にfloat:left、右のボックス(div等)にfloat:rightとすることで2カラムを作ることができます。
(それぞれ、widthの設定も忘れずに)
ただ、これを囲む親要素のバックグラウンドに色を入れたいときなどにうまくいかないことがあります。
たとえばこんな例です。
簡単に2カラムのレイアウトを作ってみました。
□ HTML
<div id=”header”> ヘッダー </div>
<div id=”main”>
<div id=”nav”> ナビ </div>
<div id=”cont”> コンテンツ </div>
</div>
<div id=”footer”> フッター </div>
</div>
□ CSS
margin: auto;
width: 800px;
background-color: gray;
}
#main {
background-color: yellow;
}
#nav {
float: left;
width: 250px;
height: 300px;
background-color: pink;
}
#cont {
float: right;
width: 550px;
height: 500px;
background-color: skyblue;
}
#footer {
clear: both;
}
ここで実は反映されていない色(ボックス)があるのに気づくと思います。
それぞれfloatで左右に振ったnavとcontentを囲んだmainです。
ここに、バックグランドとしてyellowを設定していますが、これが出てきていません。
実は、floatを指定したボックスはその上のボックスからは無いものと判断されてしまいます。
今回の場合はmain内にnavとcontentがあって、その両方ともにfloatの設定をしているので、
mainの中が何もないと判断されて高さが0になってしまっているのです。
これを解決させる方法は3つ考えられます。
まず、mainに高さ(height)を設定する方法。
これが理論的には一番わかり易いですが内包されているnavやcontentの高さが変わってきたときにそれに合わせてmainの高さも設定しなければならないのがちょっと良くありません。
そして、mainにoverflow:hiddenと設定する方法。
これはoverflowプロパティの特性を利用したなかなか便利な方法。
でも、overflowというプロパティがなくなってしまうと困る(まあ、そんなことはないと思いますが。)
□ とっても使えるoverflowプロパティ。その使い方色々。 – CSS HappyLife
最後に、main自体にfloatを指定する方法。
これが個人的には一番オススメです。
理論的にも分かりやすいしfloatで生まれた問題はfloatで解決させるに限ります。
つまり、親要素自体にも「float:left」(もしくはfloat:right)と指定してあげればOK。
実は別記事で解説しますがpositon:absoluteにおける問題点も親要素にpositionを設定することで解決します。
これと合わせて、覚えておくと分かりやすい。
ということで、CSSを以下のように書けば解決します。
□ CSS
margin: auto;
width: 800px;
background-color: gray;
}
#main {
float: left;
background-color: yellow;
}
#nav {
float: left;
width: 250px;
height: 300px;
background-color: pink;
}
#cont {
float: right;
width: 550px;
height: 500px;
background-color: skyblue;
}
#footer {
clear: both;
}
アドセンス広告メイン
関連記事
-
タスクマネージャーでプロセスを調べてみた
1年以上前の記事です。内容が古い可能性があります。熱暴走を防ぐには、なるべくマシ …
-
昨日の続き
1年以上前の記事です。内容が古い可能性があります。と、いうことで、 いろいろ見て …
-
WordPress(ワードプレス)でテンプレートにテンプレートを読み込む方法(インクルードタグ) #wp
1年以上前の記事です。内容が古い可能性があります。WordPress(ワードプレ …
-
Web屋騒動に意見してみる
1年以上前の記事です。内容が古い可能性があります。ここ数日。Web屋に関する議論 …
-
今、ネットではやっているもの。
1年以上前の記事です。内容が古い可能性があります。ねこ鍋、FX、twitter、 …
-
昔の個人ホームページでやっていたこと
1年以上前の記事です。内容が古い可能性があります。僕がホームページを作り始めたの …
-
最近の仕事
1年以上前の記事です。内容が古い可能性があります。最近殆ど、Web専門となってき …
-
iPhoneでスクリーンショットを撮る方法
1年以上前の記事です。内容が古い可能性があります。iPhone(アイフォーン)に …
-
ZIP圧縮すると音楽データが劣化するとツイッターで話題に
1年以上前の記事です。内容が古い可能性があります。圧縮には可逆圧縮と非可逆圧縮の …
-
ネットチラシ
1年以上前の記事です。内容が古い可能性があります。ネットチラシというのが旬らしい …