お世話になります。
左がメニュー(仮称・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/sa …
上記サイト様の、
http://www.geocities.jp/multi_column/practice/2c …
の、ページ半ば…よりやや下に、上記問題点を克服するという
『メインカラム幅可変、サイドバー幅固定 2カラム(ネガティブマージン型)』
の説明が載っているのですが、同じように組んでも上手く行きません…。
本文中(BOX-B)で、floatのclearを行っても支障がなくなるようなCSSの組み方はありませんでしょうか?
何卒、宜しくお願い致します。
No.4ベストアンサー
- 回答日時:
ちょっと強引ですが、これで上手くいきました。
(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% で代替してます。
ご回答ありがとうございます。
Lunascape5を使用した、Trident・Gecko・Webkit、及びOperaで上手く行きました!
divとimg内のスタイルを、cssに放り込んでclassで実現させてみようとしましたが、これだとダメなのですね…。
難しいですね><;
現状、この方法が最善策のように思いました♪
No.10
- 回答日時:
#4,9です。
#9のサンプルをちょこっと修正しました。
- ポジショニング型を「Google Chrome」で閲覧したとき、boxCがはみ出ていたのを修正
- コンテナの中央寄せもwidth指定ではなく、margin: 0px 2% 指定に (後方互換を考慮するなら、こっちの方が楽です)
ご回答、ありがとうございました!!
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
さんにも、深く御礼を申し上げます。
皆様、今回は本当にありがとうございました!!
No.9
- 回答日時:
#4です。
ひとまず、解決の目処が立ったようで何よりです。
ORUKA1951さんも指摘されていますが、補足の説明はちょっとわかりづらいです。
ただ、様々な要素が絡み合って説明しづらいという事情もわかりますので、
「HTMLソース」か「作成したHTMLのアップロード先URL」を開示する方向でアプローチされるといいのではないかと思います。
- 回答で掲示された「そのままのソース」で期待通りに表示されるのか?
- 改変したら正常描画できないとしたら、どの部分で正常描画できなくなるのか?
一つ一つ問題を切り分けて、原因を突き止めていってみてはどうでしょうか。
> divとimg内のスタイルを、cssに放り込んでclassで実現させてみようとしましたが、これだとダメなのですね…。
サンプル故にstyle属性を使いましたが、外部CSSでclass,idセレクタを定義しても実現できます。
class定義したサンプルを下記URLにUPしました。
フロート型のマルチカラム(サンプル)
http://vird2002.s8.xrea.com/test/okwave/qa508700 …
ポジショニング型のサンプルもUPしました。
ポジショニング型のマルチカラム(サンプル)
http://vird2002.s8.xrea.com/test/okwave/qa508700 …
ポジショニング型はフッタを挿入する場合において、メインカラムの高さに注意する必要があります。
具体的には、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 …
Google検索: DOCTYPE スイッチ
http://www.google.co.jp/search?q=DOCTYPE+%E3%82% …
#9にも記させていただきましたが、ご丁寧にページまでUPしてご説明下さいましてありがとうございます!
早速、ソースを参考させて頂き、試してみたいと思います。
「HTMLソース」か「作成したHTMLのアップロード先URL」を開示…
留意致します。
…floatを使用した2カラム作成方法など、ネット検索でよく見受けられたので、わりと容易く問題が解決できるのかもしれない…と思ったのが間違いでした。
作成しているファイルの拡張子(.html+CSSでした)も記さなかった事にも、あとから気付きました。
(質問ページのカテゴリがHTMLなので、.htmlと理解されるだろうと勝手に思い込んでおりました)
以降、重々気をつけます。
XML宣言はちょっとよくわからないです…。
実際作成するページでは、XML宣言は使わないつもりでした。
上記URL、ありがとうございます。
勉強してみたいと思います。
No.8
- 回答日時:
No.3 No.5 ORUKA1951です。
そういうアプローチでは何時までも解決しません。
提案があると、その都度新しい条件が加わってうまく行かないと言われる。確かにはじめのうちは、そうなる理由もわからないでもないですが、あらかじめ、(可能限り)すべての条件をお示しください。
【例】
1) 左右2分割であり、最後にフッターとしてwindows幅のフッターが配置する。
2) 左枠には、メニューに該当すものが入る。
幅はウィンドウ幅の30%である。
高さはいつも右ブロックより高い(低い/色々)
メニューにはページ内の目次、サイト内の目次のリンクをリストでマークアップしてある。
3) 右枠には、本文が入る
floatを含む--普通は考慮しないでよい。
4) フッターは左右いずれか高いほうの下部に入る。
5) 左右のブロックは最低高さを固定する
6) 上部には宣伝用のブロックが強制的に挿入される。
・・・・
など、デザインに影響しそうなものはすべて示すこと。
基本的には、floatで割付はしないほうが良いです。お気づきのようにfloatされる時点でIEはブロックの大きさの解釈を誤ります。しかもモードによって変化する。あくまで記事内に留めるべきです。
アドバイス、ありがとうございます。
#9さんのお礼欄にも書かせて頂きましたが、ようは、
「この質問の回答を得る為にはどこまでの情報開示が必要なのか」という事を、こちらが知悉していなかった、という事に尽きるのでしょう。
お書き頂いた海事内容については、次回質問する際に留意したいと思います。
ただ、申し上げるならば…
そもそも、質問は「floatを使用した2カラムデザイン」であるという事。
対して、#3にて頂いたアドバイスは「floatを使用すべきでない、positionを使用する事」。
続いて、#5にてお書き下さったposition用のソース。
しかしこのソースでは、私の手持ちブラウザ(Opera・Luna5・firefox3.05)全て、どれも意図する表示になりませんでした。
ORUKA1951さんのお手持ちのブラウザでは、#5にお書き下さったソースのみで、質問内容を網羅した表示となりましたでしょうか?
ちなみに、positionを利用したソースで何が足りなかったかは、#9さんがご提示して下さったソースにて理解する事が出来ました。
「アドバイス」を下さった事は感謝致します。
ただ…『専門家』でいらっしゃるのですよね?
講釈より、質問内容を網羅した上でのご回答を下さった方が、さほど詳しくない人間には助けとなる事を…お気に止めて頂けると幸いです。
No.7
- 回答日時:
ほんとですか??
こちらだとそういった状態にならないです。。。
ちなみに確認はfirefox3.0.11、safari4、Google Chrome、IE6(ie tester)、IE8でやってます。
先ほどのソースをコピペで持ってくるとimgのリンクが壊れたり、テキストのスペースがおかしかったりしますが、それでもテキストが重なったりはしてません。
何が違うんですかねぇ、お力になれずすみません。
表示異常が生じている画像を質問欄に添付しました。
(小さくてすみません…画像部分と本文部分に枠線をつけてみたのですが…それでも見難いですね;;)
画像左側は全て、コピペ→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は、私がバージョンアップさせていないせいなのかもしれませんが…本当に何が違うのでしょう??
不思議です…。
お返事下さいましてありがとうございます。
とても勉強になります!!
No.6
- 回答日時:
可変のコーディングしたことがないので質問を勘違いしてるかもしれませんが以下の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-transitio …
<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>
ご回答ありがとうございます。
試してみたところ、IE・Operaでは全く問題がありませんでした。
が…Luna5使用のGecko(単体・Firefox3も)・Webkit(Safari等のエンジン)では、<div id="secondary">の部分は問題ありませんでしたが、<div id="doc">の部分が、ページ上端に凝縮(無理矢理重なって)表示され、フッターも<div id="secondary">の大きさを無視して、画面中央よりやや上ぐらいの位置に表示されてしまいました。
何故なのか理由がわかりませんが…これだと、残念ながら問題があるようです…。
ソース詳細書いて下さいましてありがとうございました。
勉強になります。
No.5
- 回答日時:
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でまとめて括ればよいはずです。
この回答への補足
試しましたが、ダメでした。
IE…フッターが左メニューの大きさを無視して表示されてしまう。
Opera・Firefox・Safari…
フッター表示位置は問題なし。
ただし、画像回り込み後の、「通常の文章」が左メニューの高さ分、間が空いてしまう。
…という問題が生じました。
No.3
- 回答日時:
カラム構成をfloatでするようなサンプルがたくさんありますが、本来は間違いだと思います。
floatは本来記事中で現れる要素をinlineであるかblockであるから関わらずblockとして本文を回り込ませるためのプロパティで、カラムを作るためじゃない。
また、シェアの大きなIEではfloatに関してとても多くのバグがあります。それらをいちいち修正するのは大変です。
単純に、ブロックをabsoluteなりrelativeで分割するほうが楽です。
ご回答ありがとうございます。
absolute等での指定も試したのですが…
htmlファイルの<body>以降と、</body></html>タグの前に自動挿入されるdivがある為、上手くいきませんでした。
(自動挿入されるdivの中の要素?が、どんな幅・高さになるかはその時によって異なります。
<body>以降は問題ないですが、</body></html>以下のものが上手くいかなかったのです…)
以上の条件で、absolute・relativeを使用してカラムを組む方法、もしくは参考となりそうなURLを教えて頂けるととても助かります。
No.2
- 回答日時:
じゃあ先ほどの.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 */
ご回答ありがとうございます。
IEでは上手く行きました!!
…が、Firefox・Operaではダメでした…。
「clearfix」で検索してみて、
.clearfix { display: inline-table; }
/* hides from ie-mac \*/の方には、
.clearfix { display: block; }
(.clearfixは、「.hogehoge」に変更)
を付け加えてみましたが、ダメでした…。
もうちょっと探してみます…。
No.1
- 回答日時:
<div class="hogehoge"><img src="xxx.jpg" style="float:left; width:100px">
画像回り込み文章~~~文章
</div>
<br style="clear:both">
みたいにdivで囲んでみてもだめですか?
ご回答ありがとうございます。
念の為試しましたが…
残念ながら、この方法ではダメでした。
div等なら、
【A】---<div class="X">
【B】---<div class="Y">
~内容~
【B】---</div>
【A】---</div>
という構成(Xが親要素・Yが子要素…的?)が成り立つ訳ですが、floatに関しては、親要素・子要素に関係なく、clearを使用した時点で回り込みの解除、となってしまう…ようなのです。
また良い案・回答がございましたら宜しくお願い致します><;
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スクロール可能なチェックボックス
-
textareaで入力した文字を改行...
-
CSS <div>の入れ子が反映さ...
-
チェックボックスの背景色って...
-
画像にフレームをつけたい-ウェ...
-
★★★フッター最下部固定/スクロ...
-
文字をクリックしたら別の文字...
-
追加記入もできるプルダウンメ...
-
【CSS】floatで左右に並べた...
-
MAX関数を使ってからLEFT JOIN...
-
【jQuery】2分割レイアウトで、...
-
jQueryで電卓を作っているのですが
-
javascriptを使って画像を切り...
-
jQueryスライドショー画像への...
-
c++std::string型をTCHARに変換...
-
JQueryタブのアクティブ アン...
-
画像のランダム表示が遅い?
-
jquery ドロップダウンメニュー...
-
外部javascriptの重複を防ぐには
-
クリックすると下に説明文が出...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
スライダーの枠に動画を収める...
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
オンマウス時に別画像を上に重...
-
CSS <div>の入れ子が反映さ...
-
文字を固定したいのですが…
-
Ctrl+F(検索)の窓を出したいの...
-
テーブルの1つのセル内で、上揃...
-
CSS のみのタブ切り替えについて
-
フッターの下に隙間ができてしまう
-
スクロール可能なチェックボックス
-
Flickity で画像にリンクを貼る...
-
スマートフォンで適切に見られ...
-
floatさせたdivタグを折り返さ...
-
オープニングにアニメーション...
-
html/cssで要素が出てこなくて...
-
チェックボックスの背景色って...
-
サイトにコンテンツを並べる際...
-
CSS 可変マージン
-
HTML CSS 文字化け
おすすめ情報