• 締切済み

CSSのfloatについて

ホームページを作成していて、CSSが効かなくて困っています。 ２カラムで左側にメニュー 右側にメインのコンテンツを作成しております。 メインのコンテンツは floatでrightに設定していて その中にさらに ２つの内容を入れようと （メインコンテンツ内に左側に画像で右側に画像の詳細をいれたい） floatタグでleftとrightに設定したのですが CSSが効かなくて 左側に画像が配置され その下に画像の詳細文が配置されてしまい 全部左側に配置されてしまいました。 色々と試したみたのですが やっぱりCSSが効きませんでした。 すいません誰かお分かりになられましたら 教えてください。宜しくお願い致します。

みんなの回答

  • Safe_Mode
  • ベストアンサー率48% (1329/2725)
回答No.1

htmlソースとcssの中身が判らないと何ともいえませんね。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. その他([技術者向] コンピューター)

関連するQ&A

  • コーディングで「float」のclearの仕方

    htmlとcssのコーディングに関して質問させてください。 右側と左側にボックスをフロートさせた際、 どうやって回り込みを解除したらよいのか教えてください。 ▼htmlのタグ <div id="left">......</div> <div id="right">......</div> ▼cssのタグ #left{float:left; width:100px;} #right{float:right; width:100px;} このようなコーディングをした際には、 html、もしくはcssのどちらに、どのようなタグを 追加して回り込みをなくしたらよろしいでしょうか？ 分かりにくいかもしれませんがご教授いただければ幸いです。

  • 入れ子にしたfloatのclear

    初めてこちらを利用させていただきます。 CSSで縦3段、例えば上から『HEADER』、『MAIN』、『FOOTER』などとの段組を作成し、中央の『MAIN』内に『MENU』と『CONTENTS』の左右2段の段組をfloat:leftを利用して作成し、テンプレートとして利用しようとしています。 このテンプレート部分は、『MENU』の幅のみ固定で、『CONTENTS』は可変幅のレイアウトとしております。ここまでは順調に作成できたのですが、肝心のコンテンツの作成でつまづきました。 『CONTENTS』内に、更にfloat:leftで左右にDIVを配置したブロックを複数作ろうとした場合、2つ目のブロックを配置した時、1つ目の右側DIVの高さが1つ目左側DIVよりも高さが低い場合、2つ目以降のブロックが1つ目左側のDIV右に回りこんで表示されてしまいます。これは1つ目のブロックを配置した後、float:leftをclearしていないから当然だと思います。 そこで、1つ目のブロックの後にclearを摘要（<br />などに）させると、テンプレートの、『FOOTER』直上に2つ目のブロックが配置されてしまいます。1つのclearで入れ子になったfloat:leftが全てclearされてしまう様です。 これが『仕様』と言われればそれまでですが、TABLEや、固定幅のfloat：right等を使用すれば回避できそうですが、TABLE脱却・リキッドレイアウトをここまで実現できたのに、肝心のところで妥協するのも悔しい気がします。 まさか、こんな単純な事で丸一日悩むとは思いませんでした。web上を検索して回ったのですが、良い解決策が見つからず、こちらにおすがりした次第です。文章ではうまく表現できずわかりにくいかもしれませんが、何か回避作があれば教えて下さい。

    • ベストアンサー
    • 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について質問です。

    cssでfloatを使い3カラムで表示しています。 クラスは左からleft,centre,rightと振っています。 やりたいことはウィンドウサイズを縮めた時にカラム落ちするのではなく、 rightのdivをlefr,centreの下に潜り込ませたいです。 イメージ的にはleft,centreのz-indexが1に対し、rightが0で下に入るように縮めたいです。 できればpositionは使いたくないです。 flexboxでも試してみましたが、比率が変わりいい感じに縮むのですが、下に潜り込ませることはできませんでした。 もしなにかアドバイスがあれば宜しくお願い致します。

    • ベストアンサー
    • CSS
  • ブラウザいっぱいに表示されるページが作成できません。

    ブラウザいっぱいに表示されるページを作成しようとしているのですが、上手くいきません。 3カラムのサイトで、左側メニュー、真ん中コンテンツ、右側メニューという感じにしようと思っています。 ブラウザのサイズに合わせて真ん中のコンテンツだけが伸び縮みするようにし、左側メニュー、右側メニューは固定したいと思っています。 イメージとしてはGIGAZINEのような感じです。 http://gigazine.net/ ―HTMLソース <div id="contents"> contents </div> <div id="right"> right menu </div> <div id="left"> left menu </div> ―CSS #contents { float: right; } #right { float: right; } #left { float: left; } しかし、真ん中コンテンツは最小サイズは指定しても、最大サイズを指定することができないので、長い文章を書くとその分だけ広がってしまい、結果的に他のメニューが回り込みできなくなって下に移動してしまいます。 position:absolute;を使えば、好きな場所に配置することができるので、これを実現できるのですが、個人的にposition:absolute;はあまり良くないと聞いたことがあります。実際はどうなのでしょうか？ また、GIGAZINEのソースを見ていると、position:absolute;ではなく、position:relative;で相対的に配置しております。 今まで横幅が固定されたサイトしか作ってこなかったので、少し難しいです。アドバイスをお願いします。

  • 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
  • CSSのfloatについて教えてください。

    商品紹介のページを作成したいのですが、★どうクラスをつけて★どうfloatしたらいいのか　分かりません。（DreamweaverCS3, CSS1,Win）画像添付してます。 いろいろ試してはみたのですが・・・・・↓ 商品紹介は４シリーズに分けて各間にボーダーをつけて商品ブロックを左右に２列ずつ表示していこうと考えています。 ○各シリーズにクラスを設定してborder-Bottomをつける ○商品ブロックを1つづつ定義リストでマークアップして<dl class="floatL"><dl class="floatR">をつけていく。（cssに.floatL {float:left} .floatR {float:right}と記述してます。） 参考書を見ながらこの方法ですると何回やってもErrorがおきてしまいました。 次に１つづつ<dl>にidをつけて１つずつfloatしていくと★2が右に寄った状態になってしまいレイアウトが崩れてしまいました。 ちなみにfloatではなくabsoluteでするとデザインビューでは回りこんで表示するのですがブラウザでは表示できませんでした。 どの方法も間違った感じがするのですが独学中のためアドバイスをいただけたらうれしいです。 宜しくお願いします。

    • ベストアンサー
    • CSS
  • floatで左右に分けて配置した2個の画像の中央にテキスト

    floatで左右に分けて配置した2個の画像の中央にテキストを回り込ませた後にテキストの続きの内容の画像を配置するとIE6でレイアウトが崩れしまします。 （NN7、Opera9、Firefox2では表示されるのですが…。） 初心者ですので困っています。お力をお貸し下さい。 ↓このように表示したいです。 ■■■■　テキスト　■■■■ ■画像■　テキスト　■画像■ ■■■■　■画像■　■■■■ ■■■■　■画像■　■■■■ ↓IE6ではこのような表示になってしまいます。 ■■■■　テキスト　■■■■ ■画像■　テキスト　■画像■ ■■■■　　　　　　　■■■■ ■■■■　　　　　　　■■■■ ■画像■ ■画像■ タグは以下のとおりです。 ☆HTML☆ <div id="contents01"> <div id="contents01_left"> <img src="img/contents01_01.gif"> </div> <div id="contents01_right"> <img src="img/contents01_02.gif"> </div> <p>テキストテキスト</p> <p><img src="img/contents01_03.gif"></p> <p><img src="img/contents01_04.gif"></p> <p><img src="img/contents01_05.gif"></p> </div> ☆CSS☆ #contents01{ width:480px; height:140px; padding:10px; } #contents01_left{ float:left; width:150px; padding-right:10px; } #contents01_right{ float:right; width:150px; padding-left:10px; } どうぞよろしくお願い申し上げます。

    • ベストアンサー
    • HTML
  • css:floatの挙動について

    いつもお世話になっております。 よろしくお願いいたします。 floatの挙動がいまひとつ理解できません。 配置した画像をfloat:leftで左寄せして、画像の説明文を右側に配置したいと考えてます。説明文の要素にmarginで画像との間に空白を設けたいのですが、適用されません。 説明文要素に枠線をつけてみると、次のように配置されてしまっています。 ┌──────┐ │画像　説明文 │ └──────┘ 私としては、こうしたいのですが 　　 ┌───┐ 画像│説明文│ 　 　 └───┘ 何故でしょう？ 画像側でmarginを設定すると空白が設けられるのですが、 説明文の文字数が多く、業の高さが画像の高さをオーバーすると 画像の方に溢れてしまいます・・・ ご存知の方、どうぞご教示くださいますようお願いいたします。

    • ベストアンサー
    • CSS
  • CSSのfloatとdivについて質問です。

    CSSのfloatとdivについて質問です。 下記のようにmainの中にlocal-navigationを配置したいのですがやり方が分からないのでご教授お願いします。 現在はlocal-navigationがfooterの上に表示されて自分の意図することが出来ていません。 sidebar-leftとsideba-rightはfooter部分まで伸びていて欲しいのです。 やりたいこと： ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ｜header-menu 　　　　　　　　　　　　　　　　　　　　　｜ ｜＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿｜ ｜sidebar-left｜　　　　　main　　　　　｜sidebar-right ｜ ｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜ ｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜ ｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜ ｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜ ｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜ ｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜ ｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜ ｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜ ｜　　　　　　｜＿＿＿＿＿＿＿＿＿＿＿＿｜　　　　　　 ｜ ｜　　　 　　 ｜local-navigation　　　　｜　　　　　　　｜ ｜＿＿＿＿＿＿｜＿＿＿＿＿＿＿＿＿＿＿＿｜＿＿＿＿＿＿＿｜ ｜footer　　　　　 　　　　　　　　 　　　　　　　　　　｜ ｜＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿｜ 現在の状況： ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ｜header-menu 　　　　　　　　　　　　　　　　　　　　　｜ ｜＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿｜ ｜sidebar-left｜　　　　　main　　　　　｜sidebar-right ｜ ｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜ ｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜ ｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜ ｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜ ｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜ ｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜ ｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜ ｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜ ｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　 ｜ ｜　　　 　　 ｜　　　　　　　　　　　　｜　　　　　　　｜ ｜＿＿＿＿＿＿｜＿＿＿＿＿＿＿＿＿＿＿＿｜＿＿＿＿＿＿＿｜ ｜local-navigation 　　　　　　　　 　　　　　　　　　　｜ ｜＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿｜ ｜footer　　　　　 　　　　　　　　 　　　　　　　　　　｜ ｜＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿｜ 過去の質問： 「CSSでメイン部分が80%ぐらいに表示するには？　http://okwave.jp/qa/q7728293.html　」 「CSSのbackground-imageについて　http://okwave.jp/qa/q7728304.html　」

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する