重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら>

電子書籍の厳選無料作品が豊富!

外部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には修正しています。もしこの情報だけでは判断できない場合は、修正してないものをアップします)

A 回答 (3件)

おそらくここで問題なのはwidthの値であり、widthはpaddingを含めない領域を示します。

ですので、widthを指定しているものにpaddingを設定すると、width+paddingの値が総合的な幅になります。なので、mudatekiさんの設定だと、下に落ちてしまうと思われます。
(ただ、ブラウザの解釈によって違いがあり、IEの5.5以前はpaddingを含む領域をwidthと解釈してしまうようです)

なので、No,2さんのように、paddingを付ける合計が700になるように設定するとぴったりになるということです。

また、文章を構造的に考えるならば、divは区切りなどを示す値なので、全てをdivで区切るのではなく、枠としてのdiv,タイトルや内容を示すものにはh1~h6の見出しや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
    • good
    • 0

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


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

.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;
}
    • good
    • 0

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

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!