- ベストアンサー
CSSに関して教えてください。
CSSで左列がサイドバーで右列がメインコンテンツの二段組レイアウトについて質問します。 ●要点 サイドバーには背景色が指定してあり、サイド、メインとも高さが可変(指定なし)とします。メインコンテンツの高さの変動に応じてサイドバーの高さも変化してサイドバーの背景色とメインコンテンツの高さが同じになるように変化させたいのです。 ---------- CSSソース ---------- body { text-align: center } #wrapper { width: 720px; margin: 0 auto; text-align: left; } #content { width: 720px; background: url("../img/content.gif") repeat-y; } #main { float: right; width: 540px; } #sidebar{ float: left; width: 180px; background: blue; } ---------- HTML ---------- <body> <div id="wrapper"> <div id="content"> <div id="main"> ・・・・・・・・・ </div> <div id="sidebar"> ・・・・・・・・・ </div> </div> </div> </body> CSSでcontentに背景画像(サイドバーの幅が青色の画像)を指定してrepeat-yとするとIE6ではメインコンテンツの高さに合せてcontentに指定した画像が繰り返されサイドバーの色がメインコンテンツの高さと揃います。Firefoxでは、メインコンテンツがサイドバーより高くなると揃わなくなります。contentに指定された画像が表示されてないようです。 どのようなことでもいいのでお教えください。手がかりがなく困っています。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
id属性の値がcontentであるDIV要素の背景に色を付けてみてはいかがでしょう? ----------[ HTML部分(文字コードがutf-8の場合、更に、HTML4.01Transitionalの場合) ]---------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="外部CSSファイルまでのパス" type="text/css"> <title>Sample</title> </head> <body> <h1>Sample</h1> <div id="content"> <div id="main"> main<br>abc </div> <div id="sidebar"> sidebar </div> </div> </body> </html> ----------[ 外部CSSファイル(文字コードがutf-8の場合) ]---------- @charset "utf-8"; body { background-color: #ffffff; color: #000000; text-align: center; } div#content { width: 720px; margin: 0 auto; background: #d1df9c url(http://www.goo.ne.jp/img/icon/i_42s.gif) repeat-y; text-align: justify; display: table; } div#main { float: right; width: 540px; background-color: #8fa7d1; _margin-right: -3px; /* この値はWindows版 Internet Explorerのみ読み込ませる [CSS Hack (Underscore Hack)] */ } div#sidebar { width: 180px; }
その他の回答 (1)
- ygyo0078
- ベストアンサー率66% (8/12)
sidebarの下に、floatを解除するための divを置いてみたらどうでしょうか？ <div id="sidebar"> ・・・・・・・・・ </div> <div style="clear:both"></div> </div> </div> </body>
お礼
ご回答ありがとうございます。 早速試してみます。 ありがとうございました。
お礼
返事が遅くなり申し訳ありません。大変詳細なご説明ありがとうございます。 ご指摘のとおり試してみようと思います。 ありがとうございました。