誤差！？

締切済

質問者：mudateki
質問日時：2006/06/30 21:10
回答数：3件

外部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件)

最新から表示
回答順に表示

No.3

回答者： hiro_maru
回答日時：2006/07/01 22:40

おそらくここで問題なのは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;
}

参考URL：http://www.stylish-style.com/beginer/basic/boxmo …

この回答への補足

補足日時：2006/07/01 22:40

通報する

- 0
- 件

通報する

No.2

回答者： crepon133
回答日時：2006/07/01 10:16

正しい書き方かどうかは分かりませんが・・・

便宜上色を付けてあります

.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;
}

- 0
- 件

通報する

No.1

回答者： noname#19206
回答日時：2006/06/30 23:10

どういう風にしたいのかよくわかりませんが 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;
}