- ベストアンサー
“段組み”or“float”、どちらが原因？
こんにちは。 段組みを使い、左にメニューバー、右にメインコンテンツを配置しています。 メニューバーはfloat:left;を使って左に寄せています。 そこで問題なのですが、メニューが増えてくると、メニューバーの長さがだんだん長くなってきます。 そして、新たに一つのメニューを追加したとき、右隣りにあるメインコンテンツが下にずれたのです。 試しに、さらにメニューを追加するとまた下がります。 明らかに両者が干渉しています。 自分としては、段組みかfloatに原因があると思っていますが実際はどうなのでしょうか。 解決する方法をご存知の方、どうぞよろしくお願いします。
- arbert
- お礼率98% (269/273)
- HTML
- 回答数6
- ありがとう数6
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
#4への回答です。 CSSでは、宣言ブロック（{...}の中身）には基本的にスタイルだけしか書けないので、その中にdiv:afterのようなセレクタを含めることができません（入れ子構造が不可能）。 ですので、例えばdiet1にclearfixを適用する場合は div.diet1:after{ content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both; } div.diet1 { display: inline-block; } という風な感じになります。 同じクラス名は同一ページ内に何回出てきてもいいので、clearfixしたい要素にのみ指定すれば良いと思います（上の例ではclearfixしたい要素にclass="diet1"を付加）。そういう意味で、後からclearfixしたことがすぐに分かるようにクラス名を工夫してみたらいいと思います（例えばcfxとか）。それで、たとえばdiet1にはその他のスタイルを書いておいて、 <div class="diet1 cfx"> ..... </div> などと書けば、便利ではないでしょうか。
その他の回答 (5)
- suzuko
- ベストアンサー率38% (1112/2922)
#1です。検証しました。確かに、IE７ではおっしゃる現象が起きますね。 現在、段組を「manu」＋「main」とされて 「manu」にはfloat: left; width: 200px; 「main」にはpadding-left: 200px; なっていますが、これではどうしてもレイアウトの崩れが出来ます。 「page「manu」＋「main」」と大枠でくくり、 「manu」には、float: left; width: 200px; 「main」には、float: right; padding-left: 0px; width: ***px; にして、 「page」には、width: (***＋200＋α)px; と、少し大きめを指定されてはいかがですか？ もしくは 「manu」には、width: 200px; 「main」には、float: right; padding-left: 215px; width: ***px; として、「page「title」「manu」＋「main」」とするか。もちろん、「page」のwidthは(***＋200＋15＋α)ですが。 前者の方が、お勧めではあります。後者はプラウザによっては崩れます。 その他にも数カ所気になる点が・・・・ xhtml宣言をされるのならば、正規の表示をした方が良いでしょうね。「/」等の閉じタグは入れましょう。<br />など。 厳密に出来ない場合は「Transitional」の方がいいかと・・・・ 「manu」や「main」はhtmlに１度だけ使うので、id扱いの方で、他、classのdiv限定もない方がいいような。 お節介ついでに ******css****** body{ background-color:#ffffdd; margin-right: 0px; margin-left: 0px; margin-top: 0px; width:800px; } #page { width: 800px; } #title { background-color: #808080; padding-bottom:0px; margin-bottom:0px; padding-top:0px; padding-left:0px; height: 60px; } h1 { margin:0px ; padding:0.5em 0.3em 0.2em 0.3em; font-size: 14pt; font-family:"ＭＳ Ｐゴシック",Sans-Serif; position: absolute; top: 30px; } h2 { font-size:11pt; padding:0.5em 0px 0.5em 0.5em ; margin:0.3em 0.3em 0.5em 0.5em; position:absolute; top:70px font-family:"ＭＳ Ｐゴシック",Sans-Serif; } #menu { float: left; width: 200px; padding: 0px 0px 1em 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px; font-size: 13pt; font-family:"ＭＳ Ｐゴシック",Sans-Serif; } .category { padding-left:2em; font-family:"ＭＳ Ｐゴシック", Sans-Serif; font-size: 14pt; margin-top:0px; } #menu ul{ margin:30px 5px 10px 5px; } #menu li{ list-style-type: none; margin-top:15px; padding:0.5em; border-bottom: solid 1px #808080; } #main { float: right; width: 580px; margin: 0px; padding: 0px 0px 0px 0px; font-size: 10.5pt; font-family:"ＭＳ Ｐゴシック",sans-serif; border-left: solid 6px #000000; border-right: solid 6px #000000; } .diet1-picture { float:left; margin-left:18px; } .diet1-point1 { font-size:15pt; margin-right:35px; } .diet1-details-top { font-size:13pt; } .clr { clear:both; } .diet2-picture { float:left; margin-left:18px; } .diet2-point2 { font-size:15pt; margin-right:35px; } .diet2-details-top { font-size:13pt; } ******html****** <!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-JP" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html ; charset=Shift_JIS"> <title>やさしいダイエット法</title> <link rel="stylesheet" type="text/css" href="test-css.css"> <style type="text/css"> </style> </head> <body> <div id="title"> <h1><a href="index.html">やさしいダイエット法</a></h1> <h2>誰でも簡単にできるダイエット法を紹介しています。</h2> </div> <div id="page"> <div id="menu"> <p class="category">Ｍｅｎｕ</p> <ul> <li><a href="1.html">方法1</a></li> <li><a href="2.html">方法2</a></li> <li><a href="3.html">方法3</a></li> <li><a href="4.html">方法4</a></li> <li><a href="5.html">方法5</a></li> </ul> </div> <div id="main"> <img src="diet1.jpg" width="200" height="200" class="diet1-picturediet1"> <div class="diet1-point1"> <p>ポイント１</p> <br /> <p class="diet1-details-top"> まずは運動から始めましょう。無理なく痩せることが大事。 </p> </div> <br /> <hr size="2" width="95%" class="clr"> <img src="diet2.jpg" width="200" height="200" class="diet2-picture"> <div> <p class="diet2-point2">ポイント2</p> <br /> <p class="diet2-details-top"> もちろん食事も大切です。きちんと3食をとるのが基本。 </p> </div> <br /> <hr size="2" width="95%" class="clr"> </div> </body> </html>
お礼
ご回答ありがとうございます。 menuが200pxで、mainをmargin-left:200px;にするとぴったりだと思うのですが、これだとレイアウトが崩れるのですね。 とりあえずmenuとmainを大枠でくくっておきました。 そしてレイアウトが崩れる可能性があるのならとりあえずmainもfloat:right;にしておきます。
- twinhourse
- ベストアンサー率45% (5/11)
すみません、#3です。 先ほどの方法では、画像がはみ出してしまいますね。 自分的にはメニューとメインを新たなdivで括って、メインを右にフロートして…ということを考えるのですが、やや煩雑だし変更箇所が多いので、ここではやめておきます。 代わりにclearfixを考えてみてはいかがでしょうか。diet1やdiet2に設定すればフロートされた画像をきちんと内包してくれます。
お礼
ご回答ありがとうございます。 cssに次のように記載しましたが、画像がはみ出してしまいます。 記載方法が間違っているのでしょうか？ div.diet1{ div:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both; } div { display: inline-block; } }
- twinhourse
- ベストアンサー率45% (5/11)
突然失礼します。 メインコンテンツが下にずれる件ですが、brやhrを使うのではなく、クラス名がdiet1やdiet2（どちらもdietなどで統一してみては？）のdivに対して border-bottom:1px solid #000; などを設定してみてはどうでしょうか。そうすればclearを使うこともなく、メニューの影響もなくなり、hrの横に空白があくこともなくなると思います。少なくともFirefox3では成功しました。
お礼
ご回答いただきありがとうございます。 brやhrではなく、border-bottomを使うとメインコンテンツが下にずれるという現象が解消されました。 しかし、画像がはみ出すという新たな問題もあります。 そこはmarginやbrを使って何とかなるのですが、それだと余白などの位置関係がブラウザによって変わってきます。 No.4でも参考URLをいただいているので明日試してみます。 そして、新たな発見がありました。 borderが欠けるということがなくなりました。 欠けているところは画像の右の説明文の終わり、つまりfloatに対して clear:both;を使っているところです。 しかし、アドバイスいただいた方法でmargin-bottomを代わりに使うことによって解消されました。 だだし、clearfixというものをご紹介いただいたので、これでボーダーが欠けなければ言うことなしですね。
- suzuko
- ベストアンサー率38% (1112/2922)
^^; ＃１です。 補足、読みました。なさりたい事はわかりました。書かれている方法もほぼ正解です。 ですので、どこが悪くてどのプラウザでおっしゃる現象が起きるのか、検証するためにも、ソースを示して下さい。（補足されているは、方法だけですよ）CSSに何を書き、HTMLにどう指示しているかです。
お礼
ご回答ありがとうございます。 もうひとつ問題があります。 メインの左右のborderが欠けるのです。 欠ける場所はメインの画像の右にある説明文が終わったところです。 CSSは分けて載せます。 <!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> <link rel="stylesheet" type="text/css" href="test-css.css"> <style type="text/css"> </style> </head> <body> <div class="title"> <h1><a href="index.html">やさしいダイエット法</a></h1> <h2>誰でも簡単にできるダイエット法を紹介しています。</h2> </div> <div class="menu"> <p class="category">Ｍｅｎｕ</p> <ul> <li><a href="1.html">方法1</a></li> <li><a href="2.html">方法2</a></li> <li><a href="3.html">方法3</a></li> <li><a href="4.html">方法4</a></li> <li><a href="5.html">方法5</a></li> </ul> </div> <div class="main"> <div class="diet1"> <div class=diet1-picture> <img src="diet1.jpg" width="200" height="200" class="diet1"> </div> <div class="diet1-point1"> ポイント１ <br> <p class="diet1-details-top"> まずは運動から始めましょう。無理なく痩せることが大事。 </p> </div> </div> <br class="clr"> <hr size="2" width="95%"> <div class="diet2"> <div class=diet2-picture> <img src="diet2.jpg" width="200" height="200" class="diet2"> </div> <div class="diet2-point2"> ポイント2 <br> <p class="diet2-details-top"> もちろん食事も大切です。きちんと3食をとるのが基本。 </p> </div> </div> <br class="clr"> <hr size="2" width="95%"> </div> </body> </html>
補足
body{ background-color:#ffffdd; margin-right: 0px; margin-left: 0px; margin-top: 0px; width:800px; } div.title { background-color: #808080; padding-bottom:0px; margin-bottom:0px; padding-top:0px; padding-left:0px; height: 60px; } div.title h1 { margin:0px ; padding:0.5em 0.3em 0.2em 0.3em; font-size: 14pt; font-family:"ＭＳ Ｐゴシック",Sans-Serif; position: absolute; top: 30px; } div.title h2{ font-size:11pt; padding:0.5em 0px 0.5em 0.5em ; margin:0.3em 0.3em 0.5em 0.5em; position:absolute; top:70px font-family:"ＭＳ Ｐゴシック",Sans-Serif; } div.menu{ float: left; width: 200px; padding: 0px 0px 1em 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px; font-size: 13pt; font-family:"ＭＳ Ｐゴシック",Sans-Serif; } div.menu p.category{ padding-left:2em; font-family:"ＭＳ Ｐゴシック", Sans-Serif; font-size: 14pt; margin-top:0px; } div.menu ul{ margin:30px 5px 10px 5px; } div.menu li{ list-style-type: none; margin-top:15px; padding:0.5em; border-bottom: solid 1px #808080; } div.main { margin-top:0px; margin-left:200px; margin-right:0px; padding: 0px 0px 0px 0px; font-size: 10.5pt; font-family:"ＭＳ Ｐゴシック",sans-serif; border-left: solid 6px #000000; border-right: solid 6px #000000; } div.diet1-picture{ float:left; margin-left:18px; } div.diet1-point1{ font-size:15pt; margin-right:35px; } p.diet1-details-top{ font-size:13pt; } br.clr{ clear:both; } div.diet2-picture{ float:left; margin-left:18px; } div.diet2-point2{ font-size:15pt; margin-right:35px; } p.diet2-details-top{ font-size:13pt; }
- suzuko
- ベストアンサー率38% (1112/2922)
それだけの情報では、誰も何もいえませんよ。 ソースを補足するか、URLを載せてください。
お礼
ご回答ありがとうございます。 わかりました。 サイトは作成段階でまだ公開はしていません。 ソースについての情報を検討してみます。
補足
補足します。 メニューバーはfloatで左、メインは右になっています。 メニューバーは「ul」と「li」でリストになっています。 メインは、画像をfloatで左に置き、右はその画像の説明となっています。（つまり、メイン内にもfloatを使っています） HTMLでは、画像の説明が終わったところで<br class="○○">とし、 CSSでそのクラスに対してclear:both;としてその画像については終わっています。 そして、紹介している画像はいくつかあり、それを<hr>で区切りながら縦に並べています。 ちょうど新しいメニューを追加しようとしている高さのところに最初の画像の下にある区切り線<hr>があります。 そして、メニューを追加すると、この区切り線<hr>が下がります。 以上のような現象です。
関連する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
- 入れ子にした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
- CSSのfloatについて
ホームページを作成していて、CSSが効かなくて困っています。 ２カラムで左側にメニュー 右側にメインのコンテンツを作成しております。 メインのコンテンツは floatでrightに設定していて その中にさらに ２つの内容を入れようと （メインコンテンツ内に左側に画像で右側に画像の詳細をいれたい） floatタグでleftとrightに設定したのですが CSSが効かなくて 左側に画像が配置され その下に画像の詳細文が配置されてしまい 全部左側に配置されてしまいました。 色々と試したみたのですが やっぱりCSSが効きませんでした。 すいません誰かお分かりになられましたら 教えてください。宜しくお願い致します。
- 締切済み
- その他([技術者向] コンピューター)
- iframe の height は指定しないといけない？
左にメニューバー、右にメインコンテンツ、という標準的な配置になっています。 左のメニューバーを iframe にしているのですが、ここで height を100%にすると右のメインコンテンツの高さの分だけが表示され、途中で切れてしまいます。 height を書かないともっと短くなってしまいます。 ですので、メニューバーの長さを超えた数値を適当に入れています。 例えば、メニューバーの高さが500ピクセルだったら、600ピクセル位にしておけば全部表示されます。 しかし、この場合、メニューバーの項目が増えてくるとその度にこの数値を変更しないといけないし、いつも適当に数字をあてはめて確かめるというのも大変です。 iframeをメニューバーとして使い、全部が表示されるよい方法がありましたら教えてください。 どうぞよろしくお願いします。
- ベストアンサー
- HTML
- floatさせたdivタグを折り返させたくない
Javascriptで開いた子ウィンドウ内のページについて レイアウトで困っております。 以下のようなブロック要素の配置について <div> <div style="float; left"> コンテンツA </div> <div style="float; left"> <div> コンテンツB </div> <div> コンテンツC </div> </div> <div style="clear: both"> </div> 以上のような配置になっており、 コンテンツ３の中身をJavascriptで書き換えています。 その際、コンテンツCの横幅が変動し右に大きく広がる場合があります。 それにより、ウィンドウサイズによってはコンテンツBCがコンテンツAに回りこんでしまいます。 何故こうなるかは理解出来るのですが、対策が思い浮かびません。 ●思いついたが避けたい対応策 ・親のdivタグに想定出来る最大値のwidthを設定する ・tableタグによるレイアウト 良い対応策はございませんでしょうか？ よろしくお願いします。
- 締切済み
- HTML
- 3カラムレイアウトで隙間
下記のように３カラムレイアウトを作っています [css] #wraper { float:left; } #left { float:left; width:180px; margin:0px;} #center { width:450px; margin:0px;} #right { width:120px; margin:0px; } [html] <div id="wrapper"> <div id="left">左メニュー</div> <div id="center">中央メイン</div> </div> <div id="right">右メニュー</div> が、それぞれの段組の間（↓の部分）に3pxほどの隙間があいてしまいます ↓ ↓ [左] [中央] [右] 隙間なくぴったりつけるにはどうすればいいでしょうか。 どうぞよろしくおねがいいたします。
- ベストアンサー
- 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
- htmlでheightが自動で延長
divを使ってデザインしているのですが、 全体のデザインの入る#wrapの中に floatを左に設定した#leftと、 floatを右に設定した#rightがあります。 #leftにはメニューバーを、#rightにはコンテンツを入れるのですが、 コンテンツの量はページによって全然違うので、 #leftの長さを設定できません…。 #leftには背景色がついているので、途中でとぎれない様にしたいです。 短く設定すると、下が切れますし、 長く設定すると、情報量が無いページでは、ただ縦に長いだけの空白になってしまいます。 min-heightというのがあるらしいのですが、なぜか反映されなくて… #rightの長さに合わせて、#leftを自動で伸び縮みさせたいのですが… 可能でしょうか？ 質問の仕方が下手だったらゴメンなさい！ 誰か助けてください…。よろしくお願いします
- ベストアンサー
- HTML
- ホームページのブロック配置 Float
Float left のブロックの右に別のブロックを配置したいのですが float right 指定しても回り込んでくれません。一度は上手くいったようにみえたのですが。 原因と注意点をお教え下さい。 --------------------------------------------------------------------------- | header | |--------------------------------------------------------------------------- | dspbody (menuとtopを含む) | | ------------------------------------------------------------------------- | | menu | top | |--------------------------------------------------------------------------- | footer | ---------------------------------------------------------------------------- 【テスト中のスタイルシート】 * { margin:0; padding:0; } body { /* background-color:#ffffff; *//*内容全体の背景色*/ text-align:left; /*テキストの配置を左揃えにする*/ } div#pagebody { width:1000px; margin:0 auto; /*内容全体をセンタリング*/ text-align:left; /*テキストの配置を左揃えにする*/ } div#header { height:136px; /*背景画像のサイズに合わせてボックスの高さを指定*/ text-align:center; /*テキスト・画像の配置を中央揃えにする*/ background-image: url(img/FF054_change.png); background-repeat: repeat-x; } div#dspbody { width:1000px; height:800px; background-color: #999999; } div#menu { width:152px; height:800px; margin:0; float:left; /*内容全体を左に配置*/ text-align:left; /*テキストの配置を左揃えにする*/ /* background-color: "saddlebrown"; */ background-image: url(img/FF085_change.png); /* background-repeat: repeat-y; */ } div#top { /* width:700px; height:600px; */ float:right; text-align:center; /*テキストの配置を中央揃えにする*/ font-size: 9pt; background-color: #ccffcc; } div#top table { margin: auto; /*テーブルの配置を中央揃えにする*/ } div#footer { clear:both; text-align:center; /*テキストの配置を中央揃えにする*/ } a:link { color: yellow} a:visited { color: yellowgreen}
- ベストアンサー
- その他([技術者向] コンピューター)
- 【HP制作】２カラムを3カラムに変更したい！
現在2カラムで運営しているサイトを3カラムに変更したいのですが、上手く出来ずに困っています。 現在は、左サイドメニュー(1)、メインメニュー(2)で運営しています。 ここに右サイドメニュー(3)を追加したく、下記の通りCSSに右サイドを追加したのですが、 画面を確認すると、左から(1)→(3)→(2)の順番で表示されてしまいます。 因みに、メインのfloatをrightに変更すると、左から(2)→(1)→(3)の順に入れ替わり、 どうしても(1)→(2)→(3)の順番になりません。 独学で、その場しのぎでHP作りをしてきたので、間違いに気づけずにおります。 お分かりの方がいらっしゃったら、どうかよろしくお願いします。 初心者レベルなので、分かり易く教えて頂けると助かります。 どうぞよろしくお願いします。 ■CSS /*ページ全体の幅、レイアウトをセンタリング*/ #container { width:1130px; margin:0px auto; text-align:left; } /*ヘッダー*/ #header { width:100%; padding: 20px 0; clear:left; } /*左サイド*/ #leftside { float: left; width: 200px; } /*メイン*/ #main { float: right; ←ここを変えるとレイアウトが崩れてしまいます。 width: 700px; } /*右サイド*/ ←ここを追加しました。 #rightside { float: right; width: 200px; } /*フッター（コピーライト）*/ #footer { padding: 30px 0; width:100%; clear:both; color: #666; text-align: center; border-top: 1px solid #ccc; } ■HTML <div id="container"> </div> <!--***** メイン部分 *****--> <div id="main"> </div> <!--*****// メイン部分 *****--> <!--***** 左サイドメニュー *****--> <div id="leftside"> </div> <!--*****// 左サイドメニュー *****--> <!--***** 右サイドメニュー *****--> ←ここを追加しました。 <div id="rightside"> </div> <!--*****// 右サイドメニュー *****-->
- ベストアンサー
- CSS
お礼
ご回答いただきありがとうございます。 clearfixでうまく画像を囲むことができました。 また、これによってIEで起こっていた「横のボーダーが欠ける」という現象も解消しました。 とりあえずこれで2つの問題は解決できました。