- ベストアンサー
CSSのborderが実際の領域より上に表示される
- CSSのborder-bottom指定により、div#contensの領域より上にborderが表示されてしまう現象が発生しています。
- この現象は、min-height:800px;の指定が原因である可能性があります。
- 解決策としては、min-heightの値を可変にする方法や、別の方法で要素の高さを調整することが考えられます。
- toonie
- お礼率26% (55/210)
- ホームページ作成ソフト
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
toonie さん 先日回答したところを応用しましょう。 http://okwave.jp/qa/q6687095.html 「背景画像が表示されない」場合の対処 NO.2でヒントがありますし、同じ要領の何かでclearをする。 今回の質問内容だけなら、borderは表示される。 変な質問だから、誰も回答してくれない・・・ #leftmenu{ float:left;} #rightmenu{ float:left;} このCSSが書いてないけど、これを使ってますよね？ だとすると、clearが無いから、 div#contensが把握されない。 ※ 前質問の背景画像が解釈されないのと同じ・・・ --------- float＋clear --------- clearはコンテンツによって色々な方法があり、 基本を覚えないと何もできません。 簡単な方法だと、 <div id="rightmenu">～省略～</div> の後にclear:both;を設定。 <br style="clear:both;">でも出来るし、 <div style="clear:both;"></div>の空要素を使う場合もある。 自分が自由に出来るなら、 何かブロック要素のコンテンツをを配置する。 例えば、 <p style="clear:both;">文章文章文章</p> デザインやコンテンツ的に置けないのなら、 clearfixを使うか、ついでに使いまわすか。 clearはテクニックなので、どれが正しいとか良い訳ではないです。 ------------------- ＞どうやらmin-height:800px;の指定が原因で適用されているようです。 違います。froatです。 具体的には、※後半のポイント部分で （分かりやすいように背景色を付けた） div#contens { border-bottom:1px dotted #333333; width:800px; /* clearfixも考慮しheight類削除 */ margin-left:auto; margin-right:auto; } /* これありますよね？この辺を変更 */ #leftmenu{ float:left;width:200px; background-color:lime;} #rightmenu{ min-height:800px; /* ここにmin-height追加 */ float:left;width:600px; background-color:yellow;} * html #rightmenu{ height: auto !important; height: 800px;}/* ハック */ div#footer { background-image:url(../images/footer-bg2.jpg) ; background-repeat:no-repeat; background-position:bottom left; /* leftかcenter追加 */ height:100px; } <div id="contens"> <div id="leftmenu"> ～省略～ </div> <div id="rightmenu"> ～省略～ </div> <div style="clear:both;"></div> <!-- これがclear --> </div>
お礼
ありがとうございます。 clearしてないのがいけなかったんですね！ HTMLのほうに記述するのも知りませんでした。 いつも本当にお世話になります。 ありがとうございました～