floatによる段組とは？カラム落ちを防ぐ方法はある？
- floatを使った段組とは、div要素を横並びに配置することです。
- カラム落ちを防ぐために、div要素や親要素の幅を固定する方法があります。
- しかし、width:100%を使用するとカラム落ちが起こる場合もあります。より自然な方法を探求しています。
- ベストアンサー
floatによる段組について
昨日はお叱りを受けて全面的に見直しています。 つきましては、この機会にお伺いしたい事があります。 divをfloatで並べることを段組というみたいですね。 下でclearを入れてます。これが定番らしいので。 #contentの中にdivAとdivBがあります。 その下にクリア用のdivCを置いてます。 #contentをwidth:100%で指定するとカラム落ちします。 なのでwidth:800pxとかで指定しています。 そしてdivAとdivBのwidthも固定で指定しています。 こうするとカラム落ちが防げます。 width:100%が流動的で自然なのは分かります。 こちらでカラム落ちしない方法があればベストです。 上記のように固定で考えるのは仕方ないのでしょうか。
- CSS
- 回答数7
- ありがとう数9
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
サンプルです。 absolueについては、Wikiの記事をよく読んでください。absoluteは記事自体の順番に手を加えることなく位置を指定できます。また本文中でのfloatが自由に使えるという利点があります。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み。ウィンドウ巾に影響されないのは、min-width:600px;を除けばよくわかるかと・・ ※タブは＿に置換してあるので戻すこと。 添付画像はLynxで表示したところ・・googleもこの様に読んでいる <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;background-color:gray;} div.section p{ ＿text-indent:1em; ＿margin:0 1em; ＿line-height:1.6em; } div.header,div.section,div.footer{ ＿width:80%;margin:0 auto;/* センター配置IE5,非対応 */ /*＿min-width:600px; */ /*あまり小さくならないようにしたいときは */ ＿border:solid 1px rgb(255,200,200);background-color:rgb(255,200,200); } div.section{ /* 本文 */ ＿position:relative; ＿background-color:teal;border-color:teal; } div.section div.section img{ ＿float:left; ＿margin: 5px; ＿border:1px solid gray; ＿background-color:white; } div.section div.section{ /* 子供セレクタを使えば簡略化できる */ ＿width:68%; ＿margin:0px; ＿min-width:0px; ＿border:none; ＿position:static; ＿border:none; ＿margin-left:31%; ＿clear:left;/* clearがこのブロック内で使える */ } div.section div.contentTable{ ＿position:absolute; /* 絶対配置 */ ＿top:0;left:0;width:30%;height:100%; ＿background-color:aqua;border-color:aqua; } div.footer{background-color:yellow;border-color:yellow;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿＿<div class="abstract"> ＿＿＿<h2>要約</h2> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<div class="section"> ＿＿＿<h2><a name="QUESTION">質問</a></h2> ＿＿＿<p> ＿＿＿＿divをfloatで並べることを段組というみたいですね。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿下でclearを入れてます。これが定番らしいので。#contentの中にdivAとdivBがあります。その下にクリア用のdivCを置いてます。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿#contentをwidth:100%で指定するとカラム落ちします。なのでwidth:800pxとかで指定しています。そしてdivAとdivBのwidthも固定で指定しています。こうするとカラム落ちが防げます。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿width:100%が流動的で自然なのは分かります。こちらでカラム落ちしない方法があればベストです。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿上記のように固定で考えるのは仕方ないのでしょうか。 ＿＿＿</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h2><a name="ANSWER">回答</a></h2> ＿＿＿<p> ＿＿＿＿<img src="./images/sample.gif" width="120" height="180" alt="挿絵など"> ＿＿＿</p> ＿＿＿<p> ＿＿＿＿floatさえ使わなければ、実に簡単に実装できます。floatをブロックの配置に使いませんから、このように本文中でfloatを使ったり、それを解除したりが自由に出来ます。floatはそのためにとっておきましょう。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿<img src="./images/sample.gif" width="120" height="80" alt="挿絵など"> ＿＿＿</p> ＿＿＿<p> ＿＿＿＿このように、本来はabsoluteを使うべきです。特にリキッドスタイルの場合は、floatではなくabsoluteのほうがスムーズです。 ＿＿＿</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h2><a name="SAMPLE">方法</a></h2> ＿＿＿<p> ＿＿＿＿IE6以前の古いブラウザに対応させるなら、必ず長くなるほう(多くは本文section)を基準にして、短いほうをabsoluteさせる。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿IE7以降の新しいブラウザは、min-widthやmax-widthプロパティが使えるのでそれを活用して、ある程度より小さなウィンドウには横幅を固定してしまうとよいかもしれません。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿なお、IE5ではmargin:autoに対応していないため中心に配置されません。またIE6以前は、親コンテナブロックの高さを参照できないため目次部分が実サイズになります。 ＿＿＿</p> ＿＿</div> ＿＿<div class="contentTable"> ＿＿＿<ol> ＿＿＿＿<li><a href="#QUESTION">質問</a></li> ＿＿＿＿<li><a href="#ANSWER">回答</a></li> ＿＿＿＿<li><a href="#SAMPLE">見本</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>
その他の回答 (6)
- tracer
- ベストアンサー率41% (255/621)
#2です。 ちなみに、floatする要素は必ずwidth指定しないといけないというのは、簡単な理屈です。 floatの対象となるblock要素は、widthを指定しない場合の値はauto(ブラウザの初期値)になります。 autoというのは、親要素のpaddingや自身のborderやmarginを引いた、その要素のwidthに割り当てられることのできる最大値です。 つまり、ほぼ100%がwidthに割り当てられるので、いくらfloatを設定しても、カラムは横並びしないというわけです。 ためしに、bodyに<p style="background:red">hoge</p>だけを配置してみると分かりやすいかもしれません。 bodyのpaddingを除いて、ブラウザ幅いっぱいのpが出来るのを確認できるはずです。
お礼
ご回答有り難うございます。 自分の悪いところはpxと%をゴチャ混ぜに した所にあると分かりました。 半ば諦めていたら#4の方の方法があって しかも、プロの方からはfloatが批判されてて 本当に難しいですよね。
#1です。 名前間違えないで＞＜;(笑) ベテランっつーか単に長いこといじってるだけです。 width:100%については#2、#3の方の回答でもう大丈夫ですよね？ まあfloat自体を小細工と言われれば確かにそうかもしれません。テーブルレイアウトがよくないと知れ渡ると同時に流行った小手先の技術だという側面は確かにあります。 ただまあ、floatでmarginとpadding調整のほうがいろいろな便利プロパティを使うより書きやすいしブラウザ対応しやすいんですよね。レガシーコードみたいなものを推奨するのはよくないんですけど。 親のwidthが100%の時に絶対カラム落ちしないというと、子のwidthも%指定するくらいしかないですね。このとき、もし50%を指定するとその要素の幅は「親要素の50%」になるので、パーセンテージの合計が100%を超えない限りはカラム落ちしません。
お礼
名前を間違えて済みません。 悪かったところは理解してますけど、 逆に色々ありすぎて混乱しています。
- flyingbee
- ベストアンサー率26% (49/182)
こちらでdisplay:tableとか出てますけど。 IE8以上対応なようなのでそれ以下は切り捨てですけど。 http://okwave.jp/qa/q7075776.html 可変を扱いたいのならこんな感じです。 display:tableの例も掲載されています。 http://ib-ennoshita.jp/2008/04/24-ogawa.html
お礼
ちょっとの間にこんなに回答がついてるとは・・・ しかも、どれもこれも豊富な知識です。 というか、吸収しきれません・・・ 何がいいのか悪いのかもよく分からなくなってきた。 可変、それです。自分がやりたいのは。 ネガティブマージンってずっと前に聞きました。 そんなの使うことはないと思ってましたが この場面で出てきていたとは。 display:tableは今後の参考にさせて貰います。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞width:100%が流動的で自然なのは分かります。 基本的には、ウィンドウ横幅いっぱいに表示する(リキッドスタイル)のが無駄がなくて良いですが、必ずしもそうではありません。現在はユーザー側のディスプレイ巾も320px(i-Phone--980pxまでは縮小)から、1280pxとか1600pxなんてのもあります。一般的なサイズは1024pxかな・・・という状況ですから、最小で600px～最大900px位に収めたほうが良いでしょうね。 あと記事が多い場合、一行が４０文字～６０文字ぐらいが読みやすいでしょう。 ＞divをfloatで並べることを段組というみたいですね。 厳密にはそうではありません。段組とは流し込みを伴う記事の記入方法で、columnsプロパティ(CSS3)で設定されます。昔はtableで、最近になってスタイルシートでブロックを分けて配置する擬似的な段組が行われています。 floatで並べることが多く行われていますが、記事の順番が制約されること、レイアウトが崩れることがあること、floatを解除するための小細工が必要なため、私は原則使かわず、絶対配置(absolute)を使います。 [参考] 段組 - Wikipedia ( http://ja.wikipedia.org/wiki/%E6%AE%B5%E7%B5%84 ) また、レイアウトのためにHTMLをマークアップするのは本来の姿ではありません。(その必要は無いはず) 例示されましたような、最も基本的なHTMLは、 header ヘッダ section 本文(章) section 本文(項) figure 挿絵 aside 脚注 contentTable 目次 footer フッタ のような構造になっていると思います。div要素は、このように文書構造を示すために使います。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［7.5.4要素のグループ化: DIV要素とSPAN要素 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より この場合、floatを使うと、目次(content table)や脚注(aside)を本文より前に置く必要がでてきます。これは多くの場合、読み上げソフトやスタイルシートを読まない(検索エンジンを含む)ユーザーエージェントに対して、本文より先に悠長な目次などを読ませることになります。 以上のようなHTMLの場合、目次を絶対配置にすることで、文書構造を狂わしたり、段落ちという問題も起こりません。(floatの場合も目次のみfloatさせ、本文をfloatさせなければ段落ちはおきません) 以前、No.3 ( http://okwave.jp/qa/q7069085.html#a3 )で示したHTMLに少し手を加えたものですが、下記のようなシンプルなHTML/CSSだけで、ウィンドウ巾600px以上(i-phoneでは600pxを縮小して表示される)から、幅広のウィンドウでも段落ちはしません。そして、他の検索エンジンを含むユーザーエージェントでもまったく問題にならないでしょう。
お礼
いつもご丁寧に有り難うございます。 floatで並べるのが小細工なのですか。 いや、これは目が点になりましたよ。 確かにabsoluteで並べるのは固定化して良いのか という私の疑問そのものです。 でも、そちらが主流なんですね。 どちらかというと最大幅を意識されていますよね。
- tracer
- ベストアンサー率41% (255/621)
width:100%は親要素の幅を参照します。 なので、親要素が800pxだった場合の子供の100%は800pxです。 従って、100%と書いたら必ずブラウザいっぱいに広がるわけではありません。 憶測ですが、floatでカラム落ちするのは単に親要素の幅を超えているからではないでしょうか。 また、floatさせる要素は必ずwidthを指定する必要があります。 しかしながら、これはHTMLのドキュメントスイッチ(意味は調べてください)と、検証しているブラウザによって挙動が変わります。 押しなべていうと、Internet Explorerの挙動は間違っており、他のブラウザと挙動が異なります。 ご質問される場合は、ドキュメントスイッチの種類と、検証しているブラウザを明記されるとよいかと思います。
お礼
ご回答有り難うございます。 floatさせる要素は必ずwidthが必要なのですか。 これは知りませんでした・・・ 検証しているのはIE8ですが、 昨日叱られてからメインをchromに変えてます。 その他にはfirefox,後operaが入ってますが operaでは特に検証はしていません。
うーん…(笑) ＞divをfloatで並べることを段組というみたいですね。 違います。段組はあくまでレイアウト。 ＞下でclearを入れてます。これが定番らしいので。 スタイルの指定の内容によってはclearしないと崩れることが多いからclear:bothなどを入れる場合が多くなるというだけです。 ＞#contentをwidth:100%で指定するとカラム落ちします。 しません。カラム落ちはあくまで中のfloatされたボックスの幅の合計が外のボックスの幅を超えたとき発生するものです。 ＞なのでwidth:800pxとかで指定しています。 ＞そしてdivAとdivBのwidthも固定で指定しています。 ＞こうするとカラム落ちが防げます。 違います。divAとdivBのwidthの合計が800px以上ならカラム落ちします ＞width:100%が流動的で自然なのは分かります。 ＞こちらでカラム落ちしない方法があればベストです。 ある程度レイアウトに気を使っていると思われるサイトでもwidthはむしろ固定が多数派です。もちろんこれはカラム落ち防止が本来の意図でしょうが。 結局のところ質問したいことは何なんでしょうか？ 要点があちこち飛びまくっていて分かりません。
お礼
昨日はご指導どうもです。 tk-id-pg_1024さんはベテランですから 僕の聞きたいことは分かっていると思います。 画面を狭めていったときにwidth:100%だと カラム落ちが発生します。 widthを固定にすると狭めていっても きれいに外側に出て行ってくれます。 でもwidthの固定派が多いんですね。 それが自分の知りたかった答えです。 widthで固定するのが不自然な気がしていたので。 その他もご丁寧に指導有り難うございます。 お陰で知らなかったことまで分かりました。
関連するQ&A
- 段組でfloat:leftとfloat:rightの違い
こんにちは！ 今スタイルシートで段組をやっているんですが 2カラムの右側がfloat:leftとfloat:rightでは微妙に表示が変わります 段組の間のスペースが広くなったり狭くなったりです firefoxで表示するのに左をfloat:left、右をfloat:rightにすると 右側の段組が実現されず下に落ちてしまいます。 通常2カラムの場合の段組はどのように指定するのが正しいのでしょうか？ 過去の質問や、googleで検索しましたがどちらも場合も正しいとか誤ってるという意見が半々で どうにも判断がつかず悩んでいます。 3カラムでもfloat:left float:left float:left とやっているのもあるので こちらが正しいのかな？とも思いましたが やはりそれは違って float:left float:right float:leftが正しいという方もいらっしゃいます 通常段組を組む際はどちらが規格に沿っているのか教えていただけないでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- CSS：floatを使っての段組で困っています
図のような段組をしたいのですが、ソースはあっているでしょうか？ サイトを作成しているとズレたりするので、根本的な段組が間違っているのか見て頂けると助かります。 ■HTML <body> <div id="container"> <div id="box-2">box-2</div> <div id="box-3">box-3</div> <div id="box-4">box-4</div> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> <div id="box-8">box-8</div> </div> </body> ■CSS body { margin: 0 auto 0 auto; padding: 0px; height:100%; } #container { width: 800px; } #box-2 { float: left; width: 800px; height: 30px; } #box-3 { float: left; width: 400px; height: 300px; } #box-4 { float: left; width: 400px; height: 300px; } #box-567 { clear:left; float: left; width: 800px; } #box-5 { float: left; width: 300px; height: 200px; } #box-6 { float: left; width: 300px; height: 200px; } #box-7 { float: left; width: 200px; height: 200px; } #box-8 { clear:left; width: 800px; }
- ベストアンサー
- HTML
- 左右段組で、左側を数値固定、段組間に20pxの空き。このCSS記述について
こんにちは。 左右段組をCSSの「float」でやろうとしています。 左をdivでくくりclassを「column01」 右をdivでくくりclassを「column02」とし 左側は横幅180px固定です。 両者の間に20pxの空きを入れたいと思います。 以下のようにCSS指定をしました。 .column01 {width : 180px; float : left;} .column02 {margin-left : 200px;} 質問(1) この記述は正解でしょうか？ いろいろなサイトで調べても column02を指定なしにする解説がほとんどで 正しいのかどうかがよく分かりません 質問(2) 上の記述で、多くのブラウザでは 希望通り表示してくれますが 「Netscape4.73」ではcolumn01と02の間が 200pxどかんと開いてしまいます。 これは「Netscape4.73」のバグなのでしょうか？ それとも(1)の記述自体が間違っているのでしょうか？
- ベストアンサー
- HTML
- 3カラムのサイトでfloatができない
３カラムのホームページを作っているのですが、 中央と右のカラムがどうしてもfloatできません。。 左カラムをfloat:leftにして、中央と右のカラムを#contentsBoxで囲ってfloat:rightさせています 【ＨＴＭＬ】 <div id="wrapper_2"><!--div id wrapper_2 START--> <div id="contentsBox"><!--div id contentsBox START--> <div id="560"><!--div id 560 START--> 中央カラム </div><!--div id 560 END--> <div id="175"><!--div id 175 START--> 右カラム </div><!--div id 175 END--> </div><!--div id contentsBox END--> <div id="205"><!--div id 205 START--> 左カラム </div><!--div id 205 END--> </div><!--div id Wrapper_2 END--> 【ＣＳＳ】 /*+++wrapper_2++++++++++++++++++++++++++*/ #wrapper_2 { width: 984px; background-color:#fff; padding: 8px; margin: 10px auto 10px auto; overflow: hidden; } /*+++contentsBox++++++++++++++++++++++++++*/ #contentsBox { width: 757px; float: right; } #contentsBox:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } /*+++左カラム+++++++++++++++++++++++++++++*/ #205{ width: 205px; margin: 0 22px 0 0; float: left; } /*+++中カラム+++++++++++++++++++++++++++++*/ #560{ width: 560px; float: left; } /*+++右カラム+++++++++++++++++++++++++++++*/ #175{ width: 175px; float: right; margin-left: 22px; } まだ勉強中なので、初歩的なミスなのかもしれませんが、 どうしても中央カラムの下に右カラムがきてしまいます。 （ドリームウィーバーで見たら、望み通りの配置になっているのですが、ブラウザでチェックすると、中央カラムの下に右カラムがきてしまいます） アドバイスいただければ嬉しいです。 よろしくお願い致します。
- ベストアンサー
- CSS
- スタイルシートでの段組指定について
こんにちは。HTMLやCSSを初めて書いています。 スタイルシートの「float」指定を使って 左右の段組（合計で左右幅100％）をしたいと思います。 コードは以下のように書きました（背景色は適当）。 ---------------------------------------------- .column { float : left ;} #menu { width : 20% ; background-color : red ;} #main { width : 80% ; background-color : blue ;} ---------------------------------------------- タグ指定は <div class="column" id="menu"> 等です。 これを主なブラウザ（IE6.0／ネスケ7.1／Opera7）で 表示させると「20＋80＝100％」になるのですが、 ネスケ4.73は「20＋80*80＝84％」なのか、右に空白ができます。 では、と、#main の80％指定を削ったところ、今度は ネスケ7.1 や Opera7 で float が利いてくれません。 質問１）float については各ソフト、こういう解釈なのでしょうか？ それとも私の記述が間違っているのでしょうか？ 質問２）そういうものである場合、ネスケ4.73に対する ごまかしテクニックはあるのでしょうか？（テーブルの使用を除く） bodyの背景色を右段と同じにする方法はイマイチです。 よろしくお願いいたします。
- ベストアンサー
- CSS
- スタイルシートで上手く段組が出来ません。
スタイルシートで段組をして、いわゆる擬似フレームのHPを作りたいのですが、いまいち上手く出来ません。 下の画像の赤紫部分(HTML内ではtopsとしている部分)も分割して、全部で5つのフレームに分けたいのですが、そこを分割しようと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- body { margin:0px; padding:0px; } #top { width:450px; height:200px; float:left; background-color:#cc6600; } #tops { width:300px; height:200px; float:left; background-color:#cc5555; } #left { width:250px; height:600px; clear: both; background-color:#ff9933; } #right { width:500px; height:600px; float:left; background-color:#ffcc66; } #under { width:750px; height:10px; clear: both; background-color:#ff9955; } --> </style> </head> <body> <div id="top"></div> <div id="tops"></div> <div id="left"></div> <div id="right"></div> <div id="under"></div> </body> </html> というタグを打つと、topsの部分はちゃんと回り込んでくれるのですが、画像のように、回り込みを解除したleftの横のrightがちゃんとfloat:left;と打ち込んでいるのにも関わらず、leftの下にいってしまうのです。 どうしたらちゃんと5つに分割出来るのでしょうか？ よろしくお願いしますm(_ _)m
- ベストアンサー
- その他([技術者向] コンピューター)
- floatをfooterに指定すると正しく表示ができない。
floatをfooterに指定すると正しく表示ができない。 画像の(3)のようにfooterにfloat:leftを指定しなければ綺麗に表示されるのは分かります。ところが、画像の(1)や(2)のように、footerにfloat:left;を指定して、次の行で<div style="clear:left"></div>と指定して、footerにfloat:leftを指定しなかったのと同様の処理をすると、(1)や(2)のようにwidthに対して様々な現象が起きてしまいます。 (1)はwidthを指定しない場合、width:auto;を指定した場合に見られ、(2)はwidth:100%;とした場合にwrapperよりはみ出すという現象が起きます。なぜ、floatを指定しないのと指定後解除するのとで同様の結果が得られずに違った結果になるのでしょうか？わかる方いらっしゃいましたら回答宜しくお願い致します。 以下はソースでそのままエディタに貼り付けると表示できます。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>サンプル</title> <style type="text/css"> <!-- /* default.css */ #container { background:red; border:10px solid fuchsia; padding:10px; } #left { float: left; width: 200px; height:100px; background:yellow; } #right { float: left; border:5px #000 solid; width: 200px; height:200px; background:black; color:#FFF; } #footer { float: left; height:200px; background:blue; border:5px #000 solid; color:#FFF; } --> </style> </head> <body> <div id="wrapper">WRAPPER <div id="header">HEADER</div> <div id="container">CONTAINER <div id="left">LEFT </div> <div id="right">RIGHT </div> <br style="clear:left"/> </div> <div id="footer">FOOTER </div> <div style="clear:left"></div> </div> </body> </html>
- ベストアンサー
- HTML
- 【CSS】float:left; を使用した２カラム、本文中でclearすると間が空いてしまう
お世話になります。 左がメニュー（仮称・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の組み方はありませんでしょうか？ 何卒、宜しくお願い致します。
- ベストアンサー
- HTML
- float の clear
CSS によるレイアウトを試しています。 float を中断したいときにはその次の要素で clear=left|right する、というのは理解したのですが、この clear, 要素のネストを無視するのでしょうか。 たとえば次のソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>File Browser</title> <style type="text/css"> <!-- #leftside { background-color: #66FF00; float: left; width: 120px; height: 120px; } #rightside { background-color: #33CC99; margin-left: 120px; } #navlink .boxrow { float: left; height: 30px; width: 120px; background-color: #CC9999; margin: 5px; } #content { background-color: #CCFF99; height: 300px; clear: left; } --> </style> </head> <body> <div id="leftside"> </div> <div id="rightside"> <div id="navlink"> <div class="boxrow"></div> <div class="boxrow"></div> <div class="boxrow"></div> </div> <div id="content"> </div> </div> </body> </html> （rightside の要素の中なので）content の clear により navlink の直下に配置されて欲しいのですが、leftside の float まで clear してしまっているようです。 親の要素の中だけで clear することはできないのでしょうか？
- ベストアンサー
- HTML
- XHTML1.1でposition:relative指定したdivの挙動
XHTML1.1で、widthとheightをpx指定したdiv（divA）の中に、position:relative;を指定したdiv（divB）を配置した場合、 divAよりdivBの幅が広くなると、divBの内容がdivAの外側にはみ出して表示されてしまいますよね。 これを回避する方法はないのでしょうか。 以下簡単ですがサンプルです。 ----- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #divA { width: 200px; height: 200px; border: 1px solid #000; overflow: scroll; } .divB { position:relative; } </style> </head> <body> <div id="divA"> <div class="divB"> ************************************************************************************************************<br /> </div> </div> </body> </html>
- ベストアンサー
- CSS
お礼
わざわざこの質問のために記述して下さって 大変有り難うございます。 div.section div.sectionなんて聞かなければ 発想すらできません。ただ今本とにらめっこ中です。 リキッドスタイルにはabsoluteが良いというのは 正反対に考えていたのですが、そう言うことですか。