画像にfloatを指定すると別ボックスと重複してしまいます

質問

大幅に端折ってしまい申し訳ありませんが、
2カラム構造の左カラムに以下のようなコードを書いたところ
画像(sample.jpg)とボックスbとが重なって表示されてしまいます。

そこでフロートを解除しようとボックスaの後に<br style="clear:both">を記載すると、
右カラムの下にボックスbが表示されてしまいました。

このような画像にfloatを使用した際の高さからくる重なりを防ぐ方法などありませんでしょうか？
初心者な質問で申し訳ありませんが、宜しくお願いします。

<DIV id="a">
<img src="sample.jpg" style="float:right;">
</DIV>
<DIV id="b">
hoge
</DIV>

回答No.2

ORUKA1951 · ベストアンサー

そもそもfloatとは、ボックス要素(p,div,li・・)内の要素をブロックにしてfloat、その周囲に残りの要素を回りこませるので、ブロック同士で行うのは本来の使い方と異なります。floatに伴う北以外の動作の大部分はそれに由来するものです。
　たとえば、画像を右に配置して他の要素を回り込ませるのなら単純に、
<div>
<p><img stryle="float:left"></p>
<p>他のコンテント・・・・・・</p>
<hr style="visibility:hidden;height:0px;">
次の内容・・・・
</div>
でよいはず。
　内容の左端を空けたければ、<p style="margin:left:100px;">他のコンテンツ・・・</p>

お礼

ご回答ありがとうございます。
なるほど・・　ブロック同士で行うのは本来の使い方とは異なるのですね。
以後、気に留めていきたいと思います。

早速教えて頂いた方法を参考に組み直したところ、無事に思っていたように表示されました。
ありがとうございます。

回答No.1

grumpy_the_dwarf

<p><img src="sample.jpg" style="float:right;">hoge</p>
これで画像が右寄せで段落の文章が適当に流れ込む。

お礼

早速のご回答ありがとうございます。
早速ためしたところ、IEでは希望していたとおりに表示されました！
しかしながら、Firefoxでは相変わらず重複して表示されます。。