CSSのborderが実際の領域より上に表示される

Question

お世話になります。
CSSのborder-bottom指定のことでどうしても分からないことがあります。
div#contensにborder-bottom指定をしてその直下のdiv#footerと区別したいと考えています。
本当はdiv#footerにborder-top指定すればいいのでしょうが、footerはbackground-imageが2500pxあり、border-topすると、2500px分表示されます。
実際のコンテンツ領域は800px分なので、800pxだけのborderがほしいのです。
ところが、div#contensにborder-bottom指定すると、実際の情報量より上にborderが表示されます。これはどうしてでしょうか？

いろいろ考察したところ、どうやらmin-height:800px;の指定が原因で適用されているようです。min-heightはページによって情報が少ない場合でもある程度の高さを確保するために設定していますが、800px以上の情報量となる場合は、その情報量に沿ってきちんとborderも可変してほしいのです。解決法をどうか教えていただけないでしょうか。
よろしくお願いします。

CSS---
body {
background-image:url(../images/site-body.jpg);←この画像が2500pxあります。
background-position:top center;
background-repeat:no-repeat;
background-color:rgb(237,232,195);
margin:0px;
}
div#header {
width:800px;
height:150px;
margin-left:auto;
margin-right:auto;
}
div#contens {
border-bottom:1px dotted #333333;
width:800px;
height:auto !important;
min-height:800px;
margin-left:auto;
margin-right:auto;
}
div#footer {
background-image:url(../images/footer-bg2.jpg) ;←この画像も2500pxあります。
background-repeat:no-repeat;
background-position:bottom;
height:100px;
}

HTML---
<body>
<div id="header">
～省略～
</div>

<div id="contens">
<div id="leftmenu">
～省略～
</div>
<div id="rightmenu">
～省略～
</div>
</div>

<div id="footer">
～省略～
</div>
</body>

～省略～

naokita · Accepted Answer

toonie さん　先日回答したところを応用しましょう。 http://oshiete.goo.ne.jp/qa/6687095.html 「背景画像が表示されない」場合の対処　NO.2でヒントがありますし、同じ要領の何かでclearをする。今回の質問内容だけなら、borderは表示される。変な質問だから、誰も回答してくれない・・・ #leftmenu{ float:left;} #rightmenu{ float:left;} このCSSが書いてないけど、これを使ってますよね？だとすると、clearが無いから、 div#contensが把握されない。 ※　前質問の背景画像が解釈されないのと同じ・・・ --------- float＋clear --------- clearはコンテンツによって色々な方法があり、基本を覚えないと何もできません。簡単な方法だと、

～省略～

の後にclear:both;を設定。
でも出来るし、

の空要素を使う場合もある。自分が自由に出来るなら、何かブロック要素のコンテンツをを配置する。例えば、

文章文章文章

デザインやコンテンツ的に置けないのなら、 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; }

～省略～

CSSのborderが実際の領域より上に表示される

toonie さん 先日回答したところを応用しましょう。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

toonie さん　先日回答したところを応用しましょう。