-PR-
解決済み

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

  • すぐに回答を!
  • 質問No.5087003
  • 閲覧数735
  • ありがとう数11
  • 気になる数0
  • 回答数10
  • コメント数0

お礼率 81% (30/37)

お世話になります。
左がメニュー(仮称・BOX-A、float:left指定)、右が(仮称・BOX-B)本文、下にフッター(clear: both)…といったページを作成しています。

問題は、本文・BOX-Bにおいて、縦長の画像を使用した場合、文章を画像の右に回りこませたい時があります。
 ↓ ↓ ↓
<img src="xxx.jpg" style="float:left; width:100px">
  画像回り込み文章~~~文章
<br style="clear:left">
通常の文章
-----------------------------------------------------------
しかし、これを行ってしまうと、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の組み方はありませんでしょうか?
何卒、宜しくお願い致します。
通報する
  • 回答数10
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

質問者が選んだベストアンサー

  • 回答No.4
レベル12

ベストアンサー率 59% (285/482)

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

-----
<div style='background-color: #eee; width: 100%; display: table;'>
<img src='test.png' style='diplay: block; float:left;' />
<p>適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C</p>
</div>
-----

** ポイント
- width: 100% でfloat抑止
- diplay: table で内容に合わせてブロック拡大

clearプロパティを使って入れ子にした回り込み解除は出来なかったので、width:100% で代替してます。
お礼コメント
chalia

お礼率 81% (30/37)

ご回答ありがとうございます。

Lunascape5を使用した、Trident・Gecko・Webkit、及びOperaで上手く行きました!
divとimg内のスタイルを、cssに放り込んでclassで実現させてみようとしましたが、これだとダメなのですね…。
難しいですね><;

現状、この方法が最善策のように思いました♪
投稿日時 - 2009-06-30 19:05:51
-PR-
-PR-

その他の回答 (全9件)

  • 回答No.8
レベル14

ベストアンサー率 45% (5062/11035)

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

 基本的には、floatで割付はしないほうが良いです。お気づきのようにfloatされる時点でIEはブロックの大きさの解釈を誤ります。しかもモードによって変化する。あくまで記事内に留めるべきです。
お礼コメント
chalia

お礼率 81% (30/37)

アドバイス、ありがとうございます。

#9さんのお礼欄にも書かせて頂きましたが、ようは、
「この質問の回答を得る為にはどこまでの情報開示が必要なのか」という事を、こちらが知悉していなかった、という事に尽きるのでしょう。
お書き頂いた海事内容については、次回質問する際に留意したいと思います。

ただ、申し上げるならば…
そもそも、質問は「floatを使用した2カラムデザイン」であるという事。
対して、#3にて頂いたアドバイスは「floatを使用すべきでない、positionを使用する事」。
続いて、#5にてお書き下さったposition用のソース。
しかしこのソースでは、私の手持ちブラウザ(Opera・Luna5・firefox3.05)全て、どれも意図する表示になりませんでした。
ORUKA1951さんのお手持ちのブラウザでは、#5にお書き下さったソースのみで、質問内容を網羅した表示となりましたでしょうか?

ちなみに、positionを利用したソースで何が足りなかったかは、#9さんがご提示して下さったソースにて理解する事が出来ました。

「アドバイス」を下さった事は感謝致します。
ただ…『専門家』でいらっしゃるのですよね?
講釈より、質問内容を網羅した上でのご回答を下さった方が、さほど詳しくない人間には助けとなる事を…お気に止めて頂けると幸いです。
投稿日時 - 2009-07-01 21:35:15


  • 回答No.9
レベル12

ベストアンサー率 59% (285/482)

#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 version="1.0" encoding="utf-8" ?>~<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />の部分を、
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
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
お礼コメント
chalia

お礼率 81% (30/37)

#9にも記させていただきましたが、ご丁寧にページまでUPしてご説明下さいましてありがとうございます!
早速、ソースを参考させて頂き、試してみたいと思います。


「HTMLソース」か「作成したHTMLのアップロード先URL」を開示…
留意致します。
…floatを使用した2カラム作成方法など、ネット検索でよく見受けられたので、わりと容易く問題が解決できるのかもしれない…と思ったのが間違いでした。
作成しているファイルの拡張子(.html+CSSでした)も記さなかった事にも、あとから気付きました。
(質問ページのカテゴリがHTMLなので、.htmlと理解されるだろうと勝手に思い込んでおりました)
以降、重々気をつけます。

XML宣言はちょっとよくわからないです…。
実際作成するページでは、XML宣言は使わないつもりでした。

上記URL、ありがとうございます。
勉強してみたいと思います。
投稿日時 - 2009-07-01 21:02:06
  • 回答No.10
レベル12

ベストアンサー率 59% (285/482)

#4,9です。

#9のサンプルをちょこっと修正しました。

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

お礼率 81% (30/37)

ご丁寧にありがとうございます!!
…今帰宅したばかりなので、手前のhtml+CSSと組み合わせてやってみます!
投稿日時 - 2009-07-01 20:11:07
お礼コメント
chalia

お礼率 81% (30/37)

ご回答、ありがとうございました!!

float型・position型、いずれも上手く行きました!
…float型が良くないとの事なので、position型で作成したいところではありますが…
それだと、『本文BOX>メニューBOX』を保障する事が難しいページもあるので、それをどうするか…ちょっと考えてみたいと思います。
とても勉強になりました。
もっと頑張りたいと思います!

----------------------------------------
この欄をお借りして、失礼ながら…ポイント付与の説明をさせて頂きます(_ _*)))

#4にて、質問の直接的回答を下さり、かつ、
#9・#10にて、完璧なソースまでUPして下さったthink49さんに20pt良回答を。

#6・#7と、ソースとブラウザ画面までご提示下さったsalonpathさんに10ptを。

ポイントは差し上げられませんが…
#1・#2にて、「clearfix」というものを教えて下さったsalonpathさん、
#3・#5・#8にてソース例とfloatの悪い点を教えて下さったORUKA1951
さんにも、深く御礼を申し上げます。

皆様、今回は本当にありがとうございました!!
投稿日時 - 2009-07-02 12:01:32
  • 回答No.1
レベル12

ベストアンサー率 48% (194/399)

<div class="hogehoge"><img src="xxx.jpg" style="float:left; width:100px">
  画像回り込み文章~~~文章
</div>
<br style="clear:both">

みたいにdivで囲んでみてもだめですか?
お礼コメント
chalia

お礼率 81% (30/37)

ご回答ありがとうございます。
念の為試しましたが…
残念ながら、この方法ではダメでした。

div等なら、
【A】---<div class="X">
 【B】---<div class="Y">
    ~内容~
 【B】---</div>
【A】---</div>
という構成(Xが親要素・Yが子要素…的?)が成り立つ訳ですが、floatに関しては、親要素・子要素に関係なく、clearを使用した時点で回り込みの解除、となってしまう…ようなのです。

また良い案・回答がございましたら宜しくお願い致します><;
投稿日時 - 2009-06-30 16:24:54
  • 回答No.2
レベル12

ベストアンサー率 48% (194/399)

じゃあ先ほどの.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 */
お礼コメント
chalia

お礼率 81% (30/37)

ご回答ありがとうございます。

IEでは上手く行きました!!
…が、Firefox・Operaではダメでした…。

「clearfix」で検索してみて、
.clearfix { display: inline-table; }
/* hides from ie-mac \*/の方には、
.clearfix { display: block; }
(.clearfixは、「.hogehoge」に変更)
を付け加えてみましたが、ダメでした…。

もうちょっと探してみます…。
投稿日時 - 2009-06-30 18:25:54
  • 回答No.3
レベル14

ベストアンサー率 45% (5062/11035)

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

お礼率 81% (30/37)

ご回答ありがとうございます。

absolute等での指定も試したのですが…
htmlファイルの<body>以降と、</body></html>タグの前に自動挿入されるdivがある為、上手くいきませんでした。
(自動挿入されるdivの中の要素?が、どんな幅・高さになるかはその時によって異なります。
<body>以降は問題ないですが、</body></html>以下のものが上手くいかなかったのです…)

以上の条件で、absolute・relativeを使用してカラムを組む方法、もしくは参考となりそうなURLを教えて頂けるととても助かります。
投稿日時 - 2009-06-30 19:21:03
  • 回答No.5
レベル14

ベストアンサー率 45% (5062/11035)

No.3 ORUKA1951です。
あくまでabsoluteは親ブロックに対してですから、
<div id="page">
 <div id="menue">
 </div>
 <div class="content">
 </div>
</div>
<div id="pageInfo">
</div>
とでもしておいて、
div#page{position:relatine;padding-left:31%;}
div#menue{position:absolute;width:30%;top:0px;left:0px;}
とかでよいはず。
 absoluteは、直近の先祖がstatic(初期値)以外でpositionを指定されていれば、その内部での絶対配置です。
 ですので挿入される要素以降をposition:relativeでまとめて括ればよいはずです。
補足コメント
chalia

お礼率 81% (30/37)

試しましたが、ダメでした。

IE…フッターが左メニューの大きさを無視して表示されてしまう。
Opera・Firefox・Safari…
フッター表示位置は問題なし。
ただし、画像回り込み後の、「通常の文章」が左メニューの高さ分、間が空いてしまう。

…という問題が生じました。
投稿日時 - 2009-06-30 21:31:59
お礼コメント
chalia

お礼率 81% (30/37)

ご回答ありがとうございます。

ちょっとやってみます。
結果は後ほど、補足欄に記させて頂きます(_ _*)))
投稿日時 - 2009-06-30 21:12:03
  • 回答No.6
レベル12

ベストアンサー率 48% (194/399)

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

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2カラム可変</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
body {
background:#333;
}
#wrap {
padding:10px;
}
#header, #footer {
background:#d8d8d8;
}
#contents {
width:100%;
background:#fff;
}
#primary {
background:#fff;
float:right;
width:100%;
margin-left:-200px;
}
#doc {
margin-left:200px;
}
.pictleft {
float:left;
margin:0 10px 10px 0;
}
.pictright {
float:right;
margin:0 0 10px 10px;
}
#secondary {
float:left;
width:200px;
background:#dfe3eb;
}
.fix {
clear:both;
}
/* clearfix
-------------------------------------------------- */
#contents:after, p:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* for ie */
* html #contents, * html p {
display:inline-table;
}
/* hides from ie-mac \*/
#contents, p {
height:1%;
}
/* end hide from ie-mac */
-->
</style>
</head>
<body>
<div id="wrap">
<div id="header">header</div>
<!-- -->
<div id="contents">
<div id="primary">
<div id="doc">
<p>適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C</p>
<p>適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C</p>
<p class="pictleft"><img src="http://cmm001.goo.ne.jp/img/logo/goo.gif" width="80" height="100" alt="" /></p>
<p>適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C</p>
<p class="fix">適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C</p>
<p>適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C</p>
<p class="pictright"><img src="http://cmm001.goo.ne.jp/img/logo/goo.gif" width="80" height="100" alt="" /></p>
<p>適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C</p>
<p class="fix">適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C</p>
<p>適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C</p>
</div>
</div>
<div id="secondary">
<p>適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B</p>
<p>適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B</p>
<p>適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B</p>
<p>適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B</p>
<p>適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B</p>
<p>適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B 適当な内容B</p>
</div>
</div>
<!-- -->
<div id="footer">footer</div>
</div>
</body>
</html>
お礼コメント
chalia

お礼率 81% (30/37)

ご回答ありがとうございます。

試してみたところ、IE・Operaでは全く問題がありませんでした。
が…Luna5使用のGecko(単体・Firefox3も)・Webkit(Safari等のエンジン)では、<div id="secondary">の部分は問題ありませんでしたが、<div id="doc">の部分が、ページ上端に凝縮(無理矢理重なって)表示され、フッターも<div id="secondary">の大きさを無視して、画面中央よりやや上ぐらいの位置に表示されてしまいました。

何故なのか理由がわかりませんが…これだと、残念ながら問題があるようです…。
ソース詳細書いて下さいましてありがとうございました。
勉強になります。
投稿日時 - 2009-06-30 21:10:00
  • 回答No.7
レベル12

ベストアンサー率 48% (194/399)

ほんとですか??
こちらだとそういった状態にならないです。。。
ちなみに確認はfirefox3.0.11、safari4、Google Chrome、IE6(ie tester)、IE8でやってます。

先ほどのソースをコピペで持ってくるとimgのリンクが壊れたり、テキストのスペースがおかしかったりしますが、それでもテキストが重なったりはしてません。

何が違うんですかねぇ、お力になれずすみません。
お礼コメント
chalia

お礼率 81% (30/37)

表示異常が生じている画像を質問欄に添付しました。
(小さくてすみません…画像部分と本文部分に枠線をつけてみたのですが…それでも見難いですね;;)

画像左側は全て、コピペ→test.htmlで保存したものです。
(コピペで生じる保存できない文字は除去しました)

画像右側は、
<?xml version="1.0" encoding="utf-8" ?>~<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />の部分を、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
に変更→test2.htmlで保存したものです。

ブラウザは、上から
Firefox3.0.5、Lunascape5.0.5のGecko、同Luna5のWebkit、一番下がOpera9.64(これは、test2.htmlです><)
となっています。

【IE6・Lunascape5.0.5のTrident】
test.html…IE6は何も表示されませんでした。
test2.html…意図する表示。
【Opera9.64】
test.html・test2.htmlともに、画像と同じ表示。
画像左回りこみは成功しているものの(やや文字が画像にかぶっている)、画像右回りにおいては、空白が生じている。

Firefox3は、私がバージョンアップさせていないせいなのかもしれませんが…本当に何が違うのでしょう??
不思議です…。

お返事下さいましてありがとうございます。
とても勉強になります!!
投稿日時 - 2009-06-30 22:53:49
このQ&Aのテーマ
このQ&Aで解決しましたか?
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


専門家があなたの悩みに回答!

-PR-

ピックアップ

-PR-
ページ先頭へ