fidelio
HTML Memorandums - CSS

float を使うとブロック要素からはみ出す問題

 例えば、div を使って入れ子のレイアウトを作りたい場合、まず外側に大きい div の領域を決め、その中に小さい div の領域を入れたりします。

 このとき、例1 のように単に div を入れ子にするだけだと、div はブロック要素なので、自動的に改行されて縦に並びます。

- 例 1 -

<div id="ex2_1">
<div id="ex2_2">いろは...</div>
<div id="ex2_3">いろは...</div>
</div>

#ex1_1 { padding:20px; color:#FFFFFF; background-color:#0000FF; }
#ex1_2 { width:70px; color:#FFFFFF; background-color:#FF0000; }
#ex1_3 { width:70px; color:#0000FF; background-color:#FFFF00; }

いろはにほへとちりぬるを わかよたれそつねならむ うゐのおくやまけふこえて あさ きゆめみしゑひもせす
いろはにほへとちりぬるを わかよたれそつねならむ うゐのおくやまけふこえて あさ きゆめみしゑひもせす

 中の小さい div を横に二つ以上並べたい場合、float:left を使って左寄せして、更に回り込みをかける事で横一列に並べることができます。 しかし、例 2.1 のように、単に float:left を入れるだけだと、外側の div からはみ出してしまいます。

- 例 2.1 -

<div id="ex2_1">
<div id="ex2_2">いろは...</div>
<div id="ex2_3">いろは...</div>
</div>

#ex2_1 { padding:20px; color:#FFFFFF; background-color:#0000FF; }
#ex2_2 { float:left; width:70px; color:#FFFFFF; background-color:#FF0000; }
#ex2_3 { float:left; width:70px; color:#0000FF; background-color:#FFFF00; }

いろはにほへとちりぬるを わかよたれそつねならむ うゐのおくやまけふこえて あさ きゆめみしゑひもせす
いろはにほへとちりぬるを わかよたれそつねならむ うゐのおくやまけふこえて あさ きゆめみしゑひもせす

 それならば、clear を使って回避できないかということで、例 2.2 のように br タグに clear:both をつけて、「入れ子の内側」に二つ並んだ div の次に入れてみると、Firefox 1.5 と Opera 8.5 でははみ出しを回避できるようです。 しかし MS-IE6 では、例 2.1 と同じように表示されていると思います。

- 例 2.2 -

<div id="ex2_1">
<div id="ex2_2">いろは...</div>
<div id="ex2_3">いろは...</div>
<br class="ex2_4" />
</div>

#ex2_1, #ex2_2, #ex2_3 は例2.1に同じ。
#ex2_4 { clear:both; }

いろはにほへとちりぬるを わかよたれそつねならむ うゐのおくやまけふこえて あさ きゆめみしゑひもせす
いろはにほへとちりぬるを わかよたれそつねならむ うゐのおくやまけふこえて あさ きゆめみしゑひもせす

 そこで、clear を div に使って、例 2.2 の br の位置に空の div を置いてみたのが例 2.3 です。これだと、MS-IE6 でもはみ出さないで表示させることが出来ました。 Firefox1.5 および Opera8.5 でも、例 2.2 と同じように、はみ出さずに表示されていると思います。

 但し、空の div を設置すると、w3c validator ではいちおう合格しますが、lint では「空白になっている」というエラーが返されて減点されてしまいます。

- 例 2.3 -

<div id="ex2_1">
<div id="ex2_2">いろは...</div>
<div id="ex2_3">いろは...</div>
<div class="ex2_4"> </div>
</div>

#ex2_1, #ex2_2, #ex2_3 は例2.1、#ex2_4 は例2.2に同じ。

いろはにほへとちりぬるを わかよたれそつねならむ うゐのおくやまけふこえて あさ きゆめみしゑひもせす
いろはにほへとちりぬるを わかよたれそつねならむ うゐのおくやまけふこえて あさ きゆめみしゑひもせす
Fidelio  >  もくじ  >  PC と Internet  >  HTML Memorandums  >  float を使うとブロック要素からはみ出す問題