Borderの画像回り込み

質問

スタイルシートで、画像の回り込みをして表題や文章を表示させようとしていますが、なかなか上手くいきません。

画像 テキストテキスト
画像 テキストテキスト
テキストテキストテキ

通常の上記のようなレイアウトは出来たのですが、テキストの表題(h1)タグに、Borderでマークのような装飾をつけた場合、上手く表示されません。
表題テキストは上手く表示されているのに、Borderで作ったマークが、画像と重なってしまいます。
うまく言葉に出来ないので、サンプルを作ってみましたので、お手数ですが参照して頂ければと思います。

http://www5b.biglobe.ne.jp/~soraz/sample.html

1行目の表題マークが、画像と重なってしまっています。
これを、2段目の表題のように、テキスト直前に表示できるようにしたいのですが…
どなたか教えてください。よろしくお願いします。

回答No.1

leap_day · ベストアンサー

こんにちは

floatを使用した場合テキストが回りこむような感じに見えるので

┏━┓┏━━━┓
┃　 ┃┗━━━┛
┗━┛┏━━━┓
┏━━┛　　　　　┃
┗━━━━━━┛
という感じになっていると勘違いされがちですが実際には
┏━┳━━━━┓
┣━╋━━━━┛
┣━╋━━━━┓
┣━┛　　　　　　┃
┗━━━━━━┛
という感じになってテキストのみが右に移動して実際の開始位置はfloatの下から始まるようになります

またIEでは後続のボックスにwidth,height指定するとバグで
┏┓┏━━┓
┃┃┗━━┛
┗┛┏━━┓
　　　┗━━┛
という形になるので勘違いの原因になっているのかも？　　　　

h1 CSSにmargin-left:120px;を追加してみてください
あと　font:14(12)px; →　font-size:14(12)px;　にしてください

お礼

おっしゃられた通りに修正してみたところ、無事出来ました。

サンプルではないのですが、変更したかった実際のスタイルシートでは、font で一括指定していたのですが、それもあまりよくないのでしょうか？

ご丁寧に教えて頂きまして、本当にありがとうございました。