【CSS】float:left; を使用した２カラム、本文中でclearすると間が空いてしまう

Question

お世話になります。左がメニュー（仮称・BOX-A、float:left指定）、右が（仮称・BOX-B）本文、下にフッター（clear: both）…といったページを作成しています。問題は、本文・BOX-Bにおいて、縦長の画像を使用した場合、文章を画像の右に回りこませたい時があります。　↓　↓　↓

　　画像回り込み文章～～～文章
通常の文章 ----------------------------------------------------------- しかし、これを行ってしまうと、BOX-Aのfloatも解除されてしまい、BOX-Aの内容（高さ）分、 BOX-Bの『通常の文章』が表示される位置に空間ができてしまうのです。 …以下のURLが、その状態の例です。 http://www.geocities.jp/multi_column/practice/sample/2column2_fixed_liquid_poor.html 上記サイト様の、 http://www.geocities.jp/multi_column/practice/2column2.html#liquid の、ページ半ば…よりやや下に、上記問題点を克服するという『メインカラム幅可変、サイドバー幅固定 2カラム（ネガティブマージン型）』の説明が載っているのですが、同じように組んでも上手く行きません…。本文中（BOX-B）で、floatのclearを行っても支障がなくなるようなCSSの組み方はありませんでしょうか？何卒、宜しくお願い致します。

think49 · Accepted Answer

ちょっと強引ですが、これで上手くいきました。(IE8,Firefox3で確認) -----

適当な内容Ｃ　適当な内容Ｃ　適当な内容Ｃ　適当な内容Ｃ　適当な内容Ｃ　適当な内容Ｃ　適当な内容Ｃ　適当な内容Ｃ　適当な内容Ｃ　適当な内容Ｃ

----- ** ポイント - width: 100% でfloat抑止 - diplay: table で内容に合わせてブロック拡大 clearプロパティを使って入れ子にした回り込み解除は出来なかったので、width:100% で代替してます。

think49 · Answer

#4,9です。

#9のサンプルをちょこっと修正しました。

- ポジショニング型を「Google Chrome」で閲覧したとき、boxCがはみ出ていたのを修正
- コンテナの中央寄せもwidth指定ではなく、margin: 0px 2% 指定に (後方互換を考慮するなら、こっちの方が楽です)

think49 · Answer

#4です。ひとまず、解決の目処が立ったようで何よりです。 ORUKA1951さんも指摘されていますが、補足の説明はちょっとわかりづらいです。ただ、様々な要素が絡み合って説明しづらいという事情もわかりますので、「HTMLソース」か「作成したHTMLのアップロード先URL」を開示する方向でアプローチされるといいのではないかと思います。 - 回答で掲示された「そのままのソース」で期待通りに表示されるのか？ - 改変したら正常描画できないとしたら、どの部分で正常描画できなくなるのか？一つ一つ問題を切り分けて、原因を突き止めていってみてはどうでしょうか。 > divとimg内のスタイルを、cssに放り込んでclassで実現させてみようとしましたが、これだとダメなのですね…。サンプル故にstyle属性を使いましたが、外部CSSでclass,idセレクタを定義しても実現できます。 class定義したサンプルを下記URLにUPしました。フロート型のマルチカラム(サンプル) http://vird2002.s8.xrea.com/test/okwave/qa5087003/float.html ポジショニング型のサンプルもUPしました。ポジショニング型のマルチカラム(サンプル) http://vird2002.s8.xrea.com/test/okwave/qa5087003/position.html ポジショニング型はフッタを挿入する場合において、メインカラムの高さに注意する必要があります。具体的には、boxBのheightがboxCより高いとboxDと重なってしまうのです。上記URLでは、わかりやすいように問題が生じるケースにしてあります。正しく表示するために、boxB のスタイル(height: 1000px;)を取り除いてみてください。挙動を実感できると思います。 # 以下、蛇足ですが。 > ～の部分を、 > XML宣言を入れるとIE6では後方互換モードで描画され、クロスブラウザで相当苦労します。(それ以前にDOCTYPE宣言にURLがないので後方互換モードで表示されてしまいますが…。) 後方互換モードの存在は認識されているでしょうか？【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (2) 02-01 XML宣言によって表示モードが変わる問題を修正 | クリエイティブ | マイコミジャーナル http://journal.mycom.co.jp/special/2006/ie7beta2/001.html Google検索: DOCTYPE スイッチ http://www.google.co.jp/search?q=DOCTYPE+%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&lr=lang_ja&ie=utf-8&aq=t&rls=org.mozilla:ja-JP:official&client=firefox-a

ORUKA1951 · Answer

No.3 No.5 ORUKA1951です。
　そういうアプローチでは何時までも解決しません。
　提案があると、その都度新しい条件が加わってうまく行かないと言われる。確かにはじめのうちは、そうなる理由もわからないでもないですが、あらかじめ、(可能限り)すべての条件をお示しください。
【例】
1) 左右２分割であり、最後にフッターとしてwindows幅のフッターが配置する。
2) 左枠には、メニューに該当すものが入る。
　幅はウィンドウ幅の30%である。
　高さはいつも右ブロックより高い（低い／色々）
　メニューにはページ内の目次、サイト内の目次のリンクをリストでマークアップしてある。
3) 右枠には、本文が入る
　　floatを含む--普通は考慮しないでよい。
4) フッターは左右いずれか高いほうの下部に入る。
5) 左右のブロックは最低高さを固定する
6) 上部には宣伝用のブロックが強制的に挿入される。
・・・・
　など、デザインに影響しそうなものはすべて示すこと。

　基本的には、floatで割付はしないほうが良いです。お気づきのようにfloatされる時点でIEはブロックの大きさの解釈を誤ります。しかもモードによって変化する。あくまで記事内に留めるべきです。

salonpath · Answer

ほんとですか？？
こちらだとそういった状態にならないです。。。
ちなみに確認はfirefox3.0.11、safari4、Google Chrome、IE6（ie tester）、IE8でやってます。

先ほどのソースをコピペで持ってくるとimgのリンクが壊れたり、テキストのスペースがおかしかったりしますが、それでもテキストが重なったりはしてません。

何が違うんですかねぇ、お力になれずすみません。

salonpath · Answer

可変のコーディングしたことがないので質問を勘違いしてるかもしれませんが以下のhtmlだと問題ありますか？ 2カラム可変

適当な内容Ｃ　適当な内容Ｃ　適当な内容Ｃ　適当な内容Ｃ　適当な内容Ｃ　適当な内容Ｃ　適当な内容Ｃ　適当な内容Ｃ　適当な内容Ｃ　適当な内容Ｃ

適当な内容Ｂ　適当な内容Ｂ　適当な内容Ｂ　適当な内容Ｂ　適当な内容Ｂ　適当な内容Ｂ　適当な内容Ｂ　適当な内容Ｂ　適当な内容Ｂ　適当な内容Ｂ

ORUKA1951 · Answer

No.3 ORUKA1951です。あくまでabsoluteは親ブロックに対してですから、

とでもしておいて、 div#page{position:relatine;padding-left:31%;} div#menue{position:absolute;width:30%;top:0px;left:0px;} とかでよいはず。　absoluteは、直近の先祖がstatic(初期値)以外でpositionを指定されていれば、その内部での絶対配置です。　ですので挿入される要素以降をposition:relativeでまとめて括ればよいはずです。

ORUKA1951 · Answer

カラム構成をfloatでするようなサンプルがたくさんありますが、本来は間違いだと思います。
　floatは本来記事中で現れる要素をinlineであるかblockであるから関わらずblockとして本文を回り込ませるためのプロパティで、カラムを作るためじゃない。
　また、シェアの大きなIEではfloatに関してとても多くのバグがあります。それらをいちいち修正するのは大変です。
　単純に、ブロックをabsoluteなりrelativeで分割するほうが楽です。

salonpath · Answer

じゃあ先ほどの.hogehogeにclearfixを

/* clearfix */
.hogehoge:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* for ie */
* html .hogehoge{
display:inline-table;
}
/* hides from ie-mac \*/
.hogehoge{
height:1%;
}
/* end hide from ie-mac */

salonpath · Answer

　　画像回り込み文章～～～文章

みたいにdivで囲んでみてもだめですか？

【CSS】float:left; を使用した２カラム、本文中でclearすると間が空いてしまう

ちょっと強引ですが、これで上手くいきました。

#4,9です。

この回答への補足

#4です。

No.3 No.5 ORUKA1951です。

ほんとですか？？

可変のコーディングしたことがないので質問を勘違いしてるかもしれませんが以下のhtmlだと問題ありますか？

No.3 ORUKA1951です。

この回答への補足

カラム構成をfloatでするようなサンプルがたくさんありますが、本来は間違いだと思います。

じゃあ先ほどの.hogehogeにclearfixを

<div class="hogehoge"><img src="xxx.jpg" style="float:left; width:100px">

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　カラム構成をfloatでするようなサンプルがたくさんありますが、本来は間違いだと思います。