- ベストアンサー
【CSS】float:left; を使用した２カラム、本文中でclearすると間が空いてしまう
think49の回答
- think49
- ベストアンサー率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
関連するQ&A
- CSSにてfloat:leftを使用して画像を3つ並べたのですが。。
CSSにてfloat:leftを使用して画像を3つ並べたのですがこの3つの画像をセンターによせることができません。 なんでかまったくわかりません（ToT） 教えてくださいｍ（＿＿）ｍ 【HTML】 <div class="box2"><img src="images/sum2.gif"></div> <div class="box3"><img src="images/sum3.gif"></div> <div class="box4"><img src="images/sum4.gif"></div> 【CSS】 .box2{ float:left; width:219px; } .box3{ float:left ; width:156px;} .box4{ float:left ; width:195px; }
- 締切済み
- その他([技術者向] コンピューター)
- floatとclear
ボックスが３つあって、一つ目にfloa rightをし、２つ目にfloat leftをして、３つ目のボックスでfloatを解除する場合、clearはleftだけでいいですか？ rightは２つ目のfloat leftで解除されていますか？
- 締切済み
- CSS
- 段組で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
- CSSでfloat:leftを当てたら表示が崩れる
【緊急】はじめまして、非常に困っておりますので皆様のお力を貸してください。 ちなみに初心者なのでわかりやすくご教示頂けると助かります。 wordpressでnextgen-galleryというプラグインを使用して写真のギャラリーを作成しました。 該当のURLです。 http://6924d63e37dc33ef.lolipop.jp/works/ CSSで左にfloatさせる事で一列に5枚表示されるのですが、二段目（6枚目移行）に表示される画像の位置が左からではなく右からであったり、右から2枚表示され残り一枚だけ3段目に表示されてしまったりします。 仮に8枚の画像があった場合「■」を一枚の写真(□は一枚分のスペース)とすると ■■■■■ ■■■□□ と表示したいのですが ■■■■■ □□□■■ ■□□□□ と表示されてしまうのです。 ブラウザ間で表示の違いはありません。 ブラウザのデベロッパーツールを使い、CSSの各項目を思いつく限り無効にしたり設定を変えて表示を確認したり、それらしい箇所のCSSを実際に書き換えてみたりしましたが改善しません。 こちらがプラグインのCSSです。 /* ----------- Gallery style -------------*/ .ngg-galleryoverview { overflow: hidden; margin-top: 10px; width: 100%; clear:both; display:block !important; } .ngg-galleryoverview .desc { /* required for description */ margin:0px 10px 10px 0px; padding:5px; } .ngg-gallery-thumbnail-box { float: left; } .ngg-gallery-thumbnail { float: left; margin-right: 7px; margin-left: 3px; text-align: center; } .ngg-gallery-thumbnail img { background-color:#FFFFFF; border:1px solid #A9A9A9; display:block; margin:4px 0px 4px 0px; padding:4px; position:relative; } .ngg-gallery-thumbnail img:hover { background-color: #dddddd; } .ngg-gallery-thumbnail span { /* Images description*/ font-size:90%; padding-left:5px; display:block; } .ngg-clear { clear: both; } なおjQuery Colorboxというプラグインを組み合わせて使用していますが、プラグインを無効にしても改善しなかった為、記載はしていません。 私ではいくら調べても原因がわからないのでほとほと困り果てております。 何卒よろしくお願いします。
- ベストアンサー
- CSS
- 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
- float & clear
質問の概要は以下の通りです。 CSSを使用しています。 可変長な画面を作成する際に、サイドバーを「float:left」で配置して「margin-left」でメイン画面を配置します。 さらに、メイン画面の中で「float:left」と「margin-left」を使って左と右に分けます。 このとき、メイン画面の中で、回り込みを防ぐために「clear:left」を使用します。 ところが、この「clear:left」がサイドバーの長さに影響されてしまい、おかしな空白ができてしまいます。 これを防ぐ方法はありますか？ もしくは、全体的に構造がおかしいならば、ご指摘ください。 すべてのソースをコピーするのは大変なので、主要な部分だけを以下に載せます。 <html> <head> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- body{ margin:0; } #header{ border:1px #000000 solid; } #side{ margin:10px; float:left; width:200px; border:1px #000000 solid; } #infomation{ margin:10px 10px 10px 230px; border:1px #000000 solid; } #main{ margin:10px 10px 10px 230px; border:1px #000000 solid; } #main-left{ float:left; margin:10px; width:250px; border:1px #000000 solid; } #main-right{ margin:10px 10px 10px 280px; border:1px #000000 solid; } #footer{ clear:left; border:1px #000000 solid; } .clear{ clear:left; } --!> </style> </head> <body> <div id="header"> title </div> <div id="side"> sidebar<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <div id="infomation"> infomation </div> <div id="main"> main <div id="main-left"> main-left<br><br><br><br><br> </div> <div id="main-right"> main-right<br><br><br><br><br><br><br> </div> <div class="clear">clear</div> <div id="main-left"> main-left<br><br><br><br><br> </div> <div id="main-right"> main-right<br><br><br> </div> <div class="clear">clear</div> </div> <div id="footer">footer</div> </body> </html> 他にもいろいろ疑問点があり、「margin-left」ではなく「float:left」を２つ使用して左右の画面を表示した場合、通常は左右に分かれるのですが、右の画面の文章が長い場合に、右画面が左画面の下に移動してしまいます。 これを現象を防ぐ方法はありませんか？ 全体の横幅を固定すればできるんでしょうが、可変長の場合にうまくいきません。
- 締切済み
- 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
- CSSのfloatについて
ホームページを作成していて、CSSが効かなくて困っています。 ２カラムで左側にメニュー 右側にメインのコンテンツを作成しております。 メインのコンテンツは floatでrightに設定していて その中にさらに ２つの内容を入れようと （メインコンテンツ内に左側に画像で右側に画像の詳細をいれたい） floatタグでleftとrightに設定したのですが CSSが効かなくて 左側に画像が配置され その下に画像の詳細文が配置されてしまい 全部左側に配置されてしまいました。 色々と試したみたのですが やっぱりCSSが効きませんでした。 すいません誰かお分かりになられましたら 教えてください。宜しくお願い致します。
- 締切済み
- その他([技術者向] コンピューター)
- HTMLのCSS(float)の設定がよくわかりません
HTMLのCSS(float)の設定がよくわかりません 画像のように各配置はうまく表示されているのですが footerのCSSを #footer { width: 100%; float: left; clear: both; } と表記するとwrapperのCSSで表記した外枠のボーダーが footerの前で切、footerの左横に1px～2pxの隙間が できてしまうのですが、その理由をわかる方いらっしゃいますか。 宜しくお願い致します。 footerの表記を #footer { width: 100%; clear: both; } とすると、ボーダーも1pxの隙間もなく正常に表示されます。 宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #000; border-left-color: #000; } #container { overflow: hidden; } #left { float: left; } #right { float: left; } #footer { width: 100%; float: left; clear: both; } わかる方いらっしゃいましたら 宜しくお願い致します。
- ベストアンサー
- HTML
お礼
#9にも記させていただきましたが、ご丁寧にページまでUPしてご説明下さいましてありがとうございます！ 早速、ソースを参考させて頂き、試してみたいと思います。 「HTMLソース」か「作成したHTMLのアップロード先URL」を開示… 留意致します。 …floatを使用した２カラム作成方法など、ネット検索でよく見受けられたので、わりと容易く問題が解決できるのかもしれない…と思ったのが間違いでした。 作成しているファイルの拡張子（.html+CSSでした）も記さなかった事にも、あとから気付きました。 （質問ページのカテゴリがHTMLなので、.htmlと理解されるだろうと勝手に思い込んでおりました） 以降、重々気をつけます。 XML宣言はちょっとよくわからないです…。 実際作成するページでは、XML宣言は使わないつもりでした。 上記URL、ありがとうございます。 勉強してみたいと思います。