- 締切済み
誤差！？
外部CSSに下記のように記述し .box-base { width: 700px; } .box-header { width: 700px; height: 150px; text-align: left; } .box-center-base { width: 470px; padding: 20px 20px 20px 10px; float: left; } .box-center { width: 440px; text-align: left; } .box-center2 { width: 440px; text-align: left; } .box-left-base { width: 230px; padding: 20px 10px 20px 20px; float: left; } .box-left { width: 200px; text-align: left; } HTMLのほうに <DIV class="box-base"> <DIV class="box-header"> 内容 </DIV> <DIV class="box-left-base"> <DIV class="box-left">内容</DIV> </DIV> <DIV class="box-center-base"> <DIV class="box-center">タイトル</DIV> <DIV class="box-center2">内容<DIV> </DIV> </DIV> と打っているのですがなぜかcenterボックスのほうがleftボックスの右側に来ずに下に下がってしまいます。 そこで、leftボックスのほう（baseとleft）のwidthを2px減らしたら綺麗に表示されました。 でもその分の2px、隙間が開いてしまいました^^;（全体に20pxの隙間が開くはずが右だけ22pxになってしまいました） なぜでしょうか？どなたか助言お願いします。 （CSS、HTMLには修正しています。もしこの情報だけでは判断できない場合は、修正してないものをアップします）
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- hiro_maru
- ベストアンサー率54% (6/11)
おそらくここで問題なのはwidthの値であり、widthはpaddingを含めない領域を示します。ですので、widthを指定しているものにpaddingを設定すると、width+paddingの値が総合的な幅になります。なので、mudatekiさんの設定だと、下に落ちてしまうと思われます。 （ただ、ブラウザの解釈によって違いがあり、IEの5.5以前はpaddingを含む領域をwidthと解釈してしまうようです） なので、No,2さんのように、paddingを付ける合計が700になるように設定するとぴったりになるということです。 また、文章を構造的に考えるならば、divは区切りなどを示す値なので、全てをdivで区切るのではなく、枠としてのdiv,タイトルや内容を示すものにはｈ1～ｈ6の見出しやpなどの段落としての意味付けをする事がよいと思われます。 例えばこんな感じにしてみました。 (h1～h3も、実際はフォントの大きさなどを指定します) <DIV class="box-base"> <DIV class="box-header"> <h1>内容</h1> </DIV> <DIV class="box-left-base"> <h2>内容</h2> </DIV> <DIV class="box-center-base"> <h3>タイトル</h3> <p class="p1">内容</p> </DIV> </DIV> CSSは .box-base { width: 700px; margin: 0px; padding: 0px; } .box-header { width: 700px; height: 150px; text-align: left; margin: 0px; padding: 0px; } .box-center-base { width: 470px; padding: 0px; float: left; margin: 0px; height: auto; } .box-left-base { width: 230px; padding: 0px; float: left; margin: 0px; } h2 { padding-top: 20px; padding-right: 10px; padding-bottom: 20px; padding-left: 20px; } h3 { margin: 0px; padding-top: 20px; padding-right: 20px; padding-bottom: 0px; padding-left: 10px; } .p1 { padding-top: 0px; padding-right: 20px; padding-bottom: 20px; padding-left: 10px; margin: 0px; }
- crepon133
- ベストアンサー率51% (399/776)
正しい書き方かどうかは分かりませんが・・・ 便宜上色を付けてあります .box-base { width: 700px; background-color: #000000; } .box-header { width: 700px; height: 150px; text-align: left; background-color: #ffcccc; } .box-center-base { width: 470px; float: left; background-color: #ffffcc; } .box-center { width: 440px; margin: 20px 20px 0px 10px; text-align: left; background-color: #ffff00; } .box-center2 { width: 440px; margin: 0px 20px 20px 10px; text-align: left; background-color: #ffccff; } .box-left-base { width: 230px; float: left; background-color: #ccffff; } .box-left { width: 200px; margin: 20px 10px 20px 20px; text-align: left; background-color: #00ffff; }
どういう風にしたいのかよくわかりませんが HTML の前に strict の DOCTYPE 宣言を加えて、 CSS を大体下に挙げたような形にすれば回りこみ問題を回避でき、なおかつ異なる環境間でもほぼ同じように表示できます。 IE,Firefox,Opera などで正常に表示することが出来ました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"> .box-base { width: 710px; float:left; } .box-header { width: 700px; height: 150px; text-align: left; } .box-center-base { width: 410px; padding: 20px 20px 20px 10px; float: left; } .box-center { width: 410px; text-align: left; } .box-center2 { width: 410px; text-align: left; } .box-left-base { width: 230px; padding: 20px 10px 20px 20px; float: left; } .box-left { width: 200px; text-align: left; float:left; }
