- ベストアンサー
CSSでバックグラウントカラーの途切れを直したい
CSS初心者です。 CSSでfloatを利用してプロックを左右に並べています。 その際、左のブロックにbackground-colorを指定していますが、右のブロックの情報が多かった場合に、background-colorが途中で終わってしまいます。 どのようにしたらよいでしょうか。 下記のCSSもおかいしところがあるかも・・・指摘をお願いします。 #page { width: 750px; margin-right: auto; margin-left: auto; text-align: left; border: 1px solid #666666; margin-bottom: 0px; } div.blocka{ float: left; background-color: #FFC556; width: 150px; margin:0px 0px 0px 0px; padding:5px ; border-right:1px solid #666666 ; } div.blockb { float: left; margin:0px 0px 0px 0px; padding:10px ; width: 550px; }
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
では、考え方を変えて（heightはやめて） #page（というか２つを包むブロック)の background-color:#FFC556; にして .brockaの background-color border-right はやめる（/* */で囲む) .brockbを background-color:#FFFFFF; border-left:1px solid #666666; にする でどうでしょう
その他の回答 (4)
こんにちは！ こまかくチェックをしていないのですが・・ body { background-color: #FFFFFF; } #page { width: 750px; margin-right: auto; margin-left: auto; text-align: left; border: 1px solid #666666; margin-bottom: 0px; background-color: #FFC556; } div.blocka{ float: left; width: 150px; margin:0px 0px 0px 0px; padding:5px ; } div.blockb { float: left; margin:0px 0px 0px 0px; padding:10px; width: 550px; background-color: #FFFFFF; border-left:1px solid #666666 ; } でもたぶんこれだと右が短い場合はだめですね。 外部ファイルで２つ用意しておいて使い分ける形になるかな。
お礼
いつもありがとうございます。 みなさんに教えていただいたのを一つ一つやってみたのですが、どちらかのプロックの情報の増減がやはりネックです・・。 yayopixさんにアドバイスしていただいた通り「使い分け」をしたいと思います。ありがとうございました！
- Bo_Bo
- ベストアンサー率65% (97/149)
私が以前に回答したもの（#2）が、参考になるかもしれません。 『CSSに関する質問です。position absolute Blockのセンタリングについて』 http://okweb.jp/kotaeru.php3?qid=1098990 ここにある、“#navi”ブロックの背景色を指定せずに、“#content”ブロック で“#navi”ブロックに指定したい背景色を設定すればどうでしょう。 質問者殿の構成とは違いますが、参考例を以下に記します。 ※上の参照先を先に見てもらえるとありがたいです。 ※ <BR> を増やしたり、減らしたりして、様子を検証してください。 ※“#navi”ブロックの <br style="clear:both"> は必須です。 <html><head><title>TEST</title> <style type="text/css"><!-- body { margin: 20px 0; padding: 0; background: #eee; text-align: center; } #content { width: 640px; margin: 0 auto; border: 1px solid #000; background: #ffc; text-align: left; } #doc { width: 480px; float: right; background: #ccc; } #navi { } --></style> </head><body> <div id="content"> <div id="doc"><h1>TEST<br><br><br><br><br></h1></div> <div id="navi">LINK 1<br>LINK 2<br style="clear:both"></div> </div> </body></html> ---- 希望通りにならなかったら、ご勘弁を！？
お礼
みなさんに教えていただいたのを一つ一つやってみたのですが、どちらかのプロックの情報の増減がやはりネックです・・。 今回はyayopixさんの「使い分け」をしたいと思います。 どのご回答も今後に参考になりました。 ありがとうございました！
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
ある程度高さを限定できるのなら #pageをheight:300px;とかして 各ブロックをheight:100%;にしてみてはどうでしょうか。 とりあえず、親の#pageの高さが決まらないと１００％が有効にならないので。
お礼
決められればいいんですけど・・・。 右に入る情報の量が結構変わるんです・・。 左に色をつけたbackground-imageでやるしかないかなぁと思っています。 ありがとうございました。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
<div ID="page"> <div class="blocka"></div> <div class="blockb"></div> </div> とかなってるんですよね #pageと両方のブロックのスタイルで height:100%; にするとかでどうでしょう
お礼
IE6で見ると、ページ下にかなりの余白がでてしまいました。 NN7とoperaも厳しいです。 height:auto;にしたり、divを入れ子にしてみたりしたのですが、どれもだめで・・・。 すみません、ありがとうございました。
お礼
何度も本当にありがとうございました。 みなさんに教えていただいたのを一つ一つやってみたのですが、どちらかのプロックの情報の増減がやはりネックです・・。 今回はyayopixさんの「使い分け」をしたいと思います。 どのご回答も今後に参考になりました。 ありがとうございました！